vue-cli H5自适应解决方案

时间：2018-08-16 16:35:30 阅读：274 评论：0 收藏：0 [点我收藏+]

需要安装依赖包 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 将此注释掉

原文地址：https://www.cnblogs.com/shiapi/p/9487851.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行