vue-cli怎麼配置lib-flexible+rem行動端自適應

這次帶給大家vue-cli怎麼設定lib-flexible rem行動端自適應，vue-cli配置lib-flexible rem行動端自適應的注意事項有哪些，下面就是實戰案例，一起來看一下。

安裝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 用法

安裝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=&#39;../assets/style.css&#39;>
 /* px2rem能正常转换 */
</style>
<style>
 /* px2rem不能正常转换 */
 @import '../assets/style.css';
</style>
<style>
 /* px2rem不能正常转换 */
 @import url('../assets/style.css');
</style>

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue-cli的使用詳解

#Vue範本檔案包裝設定步奏詳解

JS怎麼阻止圖片拉伸自適應

以上是vue-cli怎麼配置lib-flexible+rem行動端自適應的詳細內容。更多資訊請關注PHP中文網其他相關文章！