基於vue-cli配置手淘的lib-flexible + rem,實現移動端自適應
沒接觸過flexible的建議先看看大漠的這篇文章這樣你才會知道長度為什麼用rem,而字型要用px
安裝flexible
npm install lib-flexible --save
引入flexible
在專案入口檔案main.js中新增如下程式碼,引入flexible
import 'lib-flexible'
px 轉 rem
使用 webpack 的 px2rem-loader,自動將px轉換為rem
安裝px2rem-loader
npm install px2rem-loader --save-dev
配置px2rem-loader
在vue-cli生成的檔案中,找到以下檔案 build/utils.js,如下圖新增配置
關於importLoaders
:如若有疑問,請參考webpack深入與實戰4-4
2017.12.8更新說明:是否需要配置importLoaders
,可參考最底部的說明。
px2rem 用法
安裝px2rem後,再使用px上有些不同,大家可以參考px2rem官方介紹,下面簡單介紹一下。
直接寫px,編譯後會直接轉化成rem ---- 除開下面兩種情況,其他長度用這個
在px後面新增/*no*/
,不會轉化px,會原樣輸出。 --- 一般border需用這個
在px後面新增/*px*/
,會根據dpr的不同,生成三套程式碼。---- 一般字型需用這個
示例程式碼
編譯前(自己寫的程式碼)
.selector {
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}
編譯後(打包後的程式碼)
.selector {
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr="3"] .selector {
height: 96px;
font-size: 42px;
}
重啟專案,就可以愉快的用設計稿上的px了。
注意:坑
- 不能在index.html的頭部加 name 為 viewport 的 meta 標籤,flexible會自動為我們新增!
更新:對外部引入css,px2rem能不能轉換rem問題
2017.12.8更新:在實際運用中發現對於外部引入的css檔案,有時候px2rem能正常轉換,有時候又不能轉換,到底是什麼原因呢?試驗了三種不同的css引入情況,發現第一種能正常轉換,二三不能正常轉換,至於原因,由於才疏學淺,還是不懂,求大神解答三種引入方式的區別。
如果明白了這些方法,就沒必要再配置cssLoader
的importLoaders
了,因為下面的方法更容易控制外部引入的css是否需要轉rem,而更改importLoaders
就控制不了了,它會強制轉換。
<style src='../assets/style.css'>
/* px2rem能正常轉換 */
</style>
<style>
/* px2rem不能正常轉換 */
@import '../assets/style.css';
</style>
<style>
/* px2rem不能正常轉換 */
@import url('../assets/style.css');
</style>