基于vue+vant的移动端适配（亲测有效）

1.下载lib-flexible --save
npm i lib-flexible --save
2.在main.js中引入lib-flexible

main.js
import 'lib-flexible/flexible'

3.设置meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

4.安装postcss-pxtorem
用于把px转换rem的插件

npm install postcss-pxtorem -D

5.配置postcss-pxtorem
在下载完postcss-pxtorem的时候根目录会自动生成一个.postcssrc.js,尽心编辑修改
如果没有的话可以手动创建

module.exports = {
plugins: {
//...
'autoprefixer': {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
]
},
'postcss-pxtorem': {
rootValue: 37.5, //vant-UI的官方根字体大小是37.5
propList: ['*']
}
}
}

6.注意，

由于为了适配vant ui（vant官方默认字体是37.5px）,所以这里rootvalue设为37.5
如果图纸是750的话，实际单位要进行缩小一半

css样式代码中将px写成Px或者PX他也不会转换成rem的~