基于vue-cli配置手淘的lib-flexible + rem，實(shí)現(xiàn)移動(dòng)端自適應(yīng)

安裝flexible

npm install lib-flexible --save

引入flexible

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

import 'lib-flexible'

px 轉(zhuǎn) rem

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

安裝px2rem-loader

npm install px2rem-loader --save-dev

配置px2rem-loader

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

是否需要配置importLoaders，可參考最底部的說(shuō)明。

px2rem 用法

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

• 直接寫(xiě)px，編譯后會(huì)直接轉(zhuǎn)化成rem ---- 除開(kāi)下面兩種情況，其他長(zhǎng)度用這個(gè)
• 在px后面添加/*no*/，不會(huì)轉(zhuǎn)化px，會(huì)原樣輸出。 --- 一般border需用這個(gè)
• 在px后面添加/*px*/,會(huì)根據(jù)dpr的不同，生成三套代碼。---- 一般字體需用這個(gè)

示例代碼

編譯前（自己寫(xiě)的代碼）

.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;}

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

注意：坑

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

對(duì)外部引入css，px2rem能不能轉(zhuǎn)換rem問(wèn)題

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

如果明白了這些方法，就沒(méi)必要再配置cssLoader的importLoaders了，因?yàn)橄旅娴姆椒ǜ菀卓刂仆獠恳氲腸ss是否需要轉(zhuǎn)rem，而更改importLoaders就控制不了了，它會(huì)強(qiáng)制轉(zhuǎn)換。

<style src='../assets/style.css'> /* px2rem能正常轉(zhuǎn)換 */</style><style> /* px2rem不能正常轉(zhuǎn)換 */ @import '../assets/style.css';</style><style> /* px2rem不能正常轉(zhuǎn)換 */ @import url('../assets/style.css');</style>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。