1. npm install lib-flexible --save
安裝 lib-flexible的依賴。在入口文件的main.js 引入。 import 'lib-flexible'
2. npm install px2rem-loader --save-dev
安裝px2rem-loader,用來把px轉化為rem。
在build文件夾下的utils.js的文件中添加以下代碼。
options 配置的remUnit 設置為75,表示75px將會轉化為1rem。
配置loader的加載順序,cssLoader, postcssLoader, px2remLoader,需要放在postcssLoader后面,順序一定要對。
配置完成,然后重啟項目。即可生效。
關於px2rem的寫法,
直接寫px,編譯后會直接轉化成rem ---- 除開下面兩種情況,其他長度用這個
在px后面添加/*no*/,不會轉化px,會原樣輸出。 --- 一般border需用這個
在px后面添加/*px*/,會根據dpr的不同,生成三套代碼。---- 一般字體需用這個
flexible的效果會在html 頭部設置這樣的格式 :<html data-dpr="1" style="font-size: 37.5px;"><head>
最大是54px,是因為flexible的js 里面有如下代碼:
改成750,適應750的設計稿。可以按照自己的設計稿來