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 将此注释掉
 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM