1. 程式人生 > >vue-cli H5自適應解決方案

vue-cli H5自適應解決方案

所有 屬性列表 als 方案 bpa pix div 保留 設置

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

vue-cli H5自適應解決方案