解决vue移动端适配问题,vue-cli3+vant-ui等第三方UI组件引入适配
1.首先把安装amfe-flexible,这里使用npm install
npm install amfe-flexible -D
2.在入口文件main.js中引入
import 'amfe-flexible/index.js'
3.在根目录的index.html 的头部加入手机端适配的meta代码
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
4.安装postcss-pxtorem是一款 postcss 插件,用于将单位转化为 rem
npm install postcss-pxtorem -D
5.在package.json配置
"postcss": {
"plugins": {
"autoprefixer": {
"browsers": [
"Android >= 4.0",
"iOS >= 7"
]
},
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": [
"*"
]
}
}
},
6.使用
屏幕宽度大于375的设计图上的像素/37.5 + 'rem'