这篇文章主要介绍了vue移动端完美适配的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
在本项目中我所使用的vue移动方案是使用amfe-flexible 和 postcss-pxtorem 结合）的方式。
首先介绍一下amfe-flexible
amfe-flexible 是配置可伸缩布局方案，主要是将 1rem 设为 viewWidth/10。
然后就是这个库 postcss-pxtorem
postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。
1、安装 amfe-flexible 和 postcss-pxtorem
计算
安全
数据库
网络和加速
企业服务
npm install amfe-flexible --save
npm install postcss-pxtorem --save2、安装完成后，肯定需要引入才能使用
我们需要在main.js中引入才能使用
import 'amfe-flexible';这样引入就OK了
3、然后就是postcss-pxtorem 配置步骤
配置postcss-pxtorem，可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可：
为了方便 我是在 vue.config.js 配置的代码配置如下：
module.exports = {
//...其他配置
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 37.5,
propList: ['*']
})
]
}
}
},
}在.postcssrc.js或postcss.config.js中配置如下：
module.exports = {
"plugins": {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}注意点：
1、rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为375，即rootValue设为37.5；
2、propList是设置需要转换的属性，这边*为所有都进行转换。
通过以上配置我们就可以在项目使用了。
比如项目中我们这样写：
.login-form {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
box-sizing: border-box;
border-radius: 10px;
.title {
position: absolute;
top: -50px;
font-size: 24px;
color: #fff;
left: 0;
right: 0;
text-align: center;
}
}那我们代码的产出就是下面这样的 ，插件实惠帮我们自动转换单位。
login-wraper .login-form {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
padding: .53333rem; // 注意这个就是转换后的单位
box-sizing: border-box;
border-radius: .26667rem; // 注意这个就是转换后的单位
}感谢你能够认真阅读完这篇文章，希望小编分享的“vue移动端完美适配的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
