需要安裝依賴包 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 將此注釋掉