浅谈vue移动端完美适配⽅案
前⾔：根据最近做的⼀个医疗⼿机端项⽬总结在移动端，vue怎么在不同屏幕上做根据不同屏幕⼤⼩适配
1、适配⽅案
在本项⽬中我所使⽤的vue移动⽅案是使⽤amfe-flexible 和 postcss-pxtorem 结合）的⽅式。
⾸先介绍⼀下amfe-flexible
amfe-flexible 是配置可伸缩布局⽅案，主要是将 1rem 设为 viewWidth/10。
然后就是这个库 postcss-pxtorem
postcss-pxtorem是postcss的插件，⽤于将像素单元⽣成rem单位。
2、如何使⽤和配置？
1、安装 amfe-flexible 和 postcss-pxtorem
npm install amfe-flexible --save
npm install postcss-pxtorem --save
2、安装完成后，肯定需要引⼊才能使⽤
我们需要在main.js中引⼊才能使⽤
import 'amfe-flexible';
这样引⼊就OK了
3、然后就是postcss-pxtorem 配置步骤
配置postcss-pxtorem，可在fig.js、.postcssrc.js、fig.js其中之⼀配置，权重从左到右降低，没有则新建⽂件，只需要设置其中⼀个即可：
为了⽅便我是在 fig.js 配置的代码配置如下：
//...其他配置
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 37.5,
propList: ['*']
})
]
}
}
},
}
在.postcssrc.js或fig.js中配置如下：
"plugins": {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
注意点：
1、rootValue根据设计稿宽度除以10进⾏设置，这边假设设计稿为375，即rootValue设为37.5；
2、propList是设置需要转换的属性，这边*为所有都进⾏转换。
通过以上配置我们就可以在项⽬使⽤了。
⽐如项⽬中我们这样写：
.login-form {
width: 90%;
position: absolute;
top: 50%;
box sizingleft: 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 移动端完美适配⽅案的⽂章就介绍到这了，更多相关vue 移动端完美适配⽅案内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。