這篇文章給大家分享的是有關(guān)vue-cli配置lib-flexible + rem如何實現(xiàn)移動端自適應(yīng)的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)的客戶來自各行各業(yè)，為了共同目標(biāo)，我們在工作上密切配合，從創(chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對我們的要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領(lǐng)域包括網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、電商網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)。

安裝flexible

npm install lib-flexible --save

引入flexible

在項目入口文件main.js中添加如下代碼，引入flexible

import 'lib-flexible'

px 轉(zhuǎn) rem

使用 webpack 的 px2rem-loader,自動將px轉(zhuǎn)換為rem

安裝px2rem-loader

npm install px2rem-loader --save-dev

配置px2rem-loader

在vue-cli生成的文件中,找到以下文件 build/utils.js,如下圖添加配置

關(guān)于importLoaders：如若有疑問，請參考webpack深入與實戰(zhàn)4-4

2017.12.8更新說明：是否需要配置importLoaders，可參考最底部的說明。

px2rem 用法

安裝px2rem后，再使用px上有些不同，大家可以參考px2rem官方介紹，下面簡單介紹一下。

直接寫px，編譯后會直接轉(zhuǎn)化成rem ---- 除開下面兩種情況，其他長度用這個

在px后面添加/*no*/，不會轉(zhuǎn)化px，會原樣輸出。 --- 一般border需用這個

在px后面添加/*px*/,會根據(jù)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;
}

重啟項目，就可以愉快的用設(shè)計稿上的px了。

注意：坑

不能在index.html的頭部加 name 為 viewport 的 meta 標(biāo)簽，flexible會自動為我們添加！

更新：對外部引入css，px2rem能不能轉(zhuǎn)換rem問題

2017.12.8更新：在實際運用中發(fā)現(xiàn)對于外部引入的css文件，有時候px2rem能正常轉(zhuǎn)換，有時候又不能轉(zhuǎn)換，到底是什么原因呢？試驗了三種不同的css引入情況，發(fā)現(xiàn)第一種能正常轉(zhuǎn)換，二三不能正常轉(zhuǎn)換，至于原因，由于才疏學(xué)淺，還是不懂，求大神解答三種引入方式的區(qū)別。

如果明白了這些方法，就沒必要再配置cssLoader的importLoaders了，因為下面的方法更容易控制外部引入的css是否需要轉(zhuǎn)rem，而更改importLoaders就控制不了了，它會強制轉(zhuǎn)換。

 /* px2rem能正常轉(zhuǎn)換 */

感謝各位的閱讀！關(guān)于“vue-cli配置lib-flexible + rem如何實現(xiàn)移動端自適應(yīng)”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！