1.下載lib-flexible
使用的是vue-cli+webpack讹弯,通過(guò)npm來(lái)安裝的
npm i lib-flexible --save
2.引入lib-flexible
在main.js中引入lib-flexible
import 'lib-flexible/flexible'
3.設(shè)置meta標(biāo)簽
通過(guò)meta標(biāo)簽况既,設(shè)置設(shè)備寬度以及縮放比例
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4.安裝px2rem-loader
npm install px2rem-loader
5.配置px2rem-loader
這里是重要的一步~~
在build文件中找到util.js,將px2rem-loader添加到cssLoaders中组民,如:
同時(shí)棒仍,在generateLoaders方法中添加px2remLoader
6.重啟,一切ok~
當(dāng)配置完之后臭胜,只需要重啟下服務(wù)莫其,就自動(dòng)轉(zhuǎn)化為rem了
npm run dev