vue 加 flexible 實現自適應


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的設計稿。可以按照自己的設計稿來


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM