vue-cli H5自适应解决方案

需要安装依赖包     lib-flexible  postcss-pxtorem

在main.js 引入 lib-flexible

 

postcss-pxtorem

 

在.postcssrc.js 文件中添加 

"postcss-pxtorem": {

"rootValue": 75, // 对根元素大小进行设置

"unitPrecision": 5, // 转换成rem后保留的小数点位数

"propList": ["*"], // 存储哪些将被转换的属性列表

"selectorBlackList": [ // 对css选择器进行过滤的数组

".vux-",

".weui-",

".scroller-",

".dp-",

".mt-",

".mint-"

],

"replace": true,

"mediaQuery": false,

"minPixelValue": 12 // 所有小于12px的样式都不被转换

}

 

设计出750px稿子（这个可以商量，webpack里面有配置可以改的），你在布局中直接使用px，webpack会自动转化rem，再根据淘宝的自适应方案达到自适应的效果。

如果低于12px 依然被转换 请检查是否安装了

postcss-px2rem 

 

并在vue-loader.conf.js 将此注释掉