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