第一部分：項(xiàng)目中引入lib-flexible
一、項(xiàng)目中安裝lib-flexible
npm install lib-flexible --save
二鲜侥、在項(xiàng)目的入口main.js文件中引入lib-flexible
import 'lib-flexible'
第二部分：使用postcss-px2rem自動(dòng)將css中的px轉(zhuǎn)換成rem
一、安裝postcss-px2rem?
npm install postcss-px2rem --save-dev
二、配置px2rem-loader
在vue-cli生成的文件中,找到以下文件 build/utils.js,如下圖添加配置
初始的適配方案就完成了舔亭，然后可以直接在css或.vue文件中寫(xiě)已px為單位的樣式了，到瀏覽器會(huì)自動(dòng)轉(zhuǎn)為rem喇澡。
因?yàn)榍捌陧?xiàng)目安排不是太趕，ui給的設(shè)計(jì)圖也相對(duì)簡(jiǎn)單善炫，所以自己寫(xiě)了按鈕組件之類的撩幽，適配還挺好，覺(jué)得自己棒棒噠~
直到ui的后續(xù)設(shè)計(jì)圖出現(xiàn)時(shí)間插件箩艺，然后就引入了vant的組件庫(kù)窜醉。
放了一個(gè)簡(jiǎn)單的cell組件，npm run serve項(xiàng)目跑起來(lái)艺谆，發(fā)現(xiàn)組件中的樣式都變小了榨惰，F(xiàn)12看了一下果然組件的樣式也都被轉(zhuǎn)換成了rem。
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)為我們添加视卢！
問(wèn)題
變小的主要原因是第三庫(kù) css一依據(jù)data-dpr="1"時(shí)寫(xiě)的尺寸
這時(shí)我們使用的flexible引入時(shí) data-dpr不是一個(gè)寫(xiě)死了的，是一個(gè)動(dòng)態(tài)的廊驼；就導(dǎo)致這個(gè)問(wèn)題
然后就各種查解決方案据过，網(wǎng)絡(luò)上給的解決方案一個(gè)是改寫(xiě)第三方庫(kù)的樣式，還有一個(gè)就是讓flexible不編譯第三方庫(kù)的文件（忽略u(píng)i組件庫(kù)的樣式文件）蔬充。
解決方案一：
將第三方組件的css文件復(fù)制出來(lái)第三方庫(kù)的css代碼px統(tǒng)一擴(kuò)大2倍蝶俱，或者用全局替換將px替換為px/*no*/班利。我覺(jué)的這個(gè)方案不太好沒(méi)有采用饥漫，具體操作可以參考以下兩篇文章：https://segmentfault.com/a/1190000014575890 和 https://blog.csdn.net/weixin_42464312/article/details/82769805。
解決方案二：
使用postcss-px2rem-exclude罗标，網(wǎng)上好多說(shuō)用這個(gè)方法不起作用庸队，經(jīng)過(guò)一個(gè)下午的折騰才發(fā)現(xiàn)是使用方法不對(duì)，我的錯(cuò)誤方法就不跟你們說(shuō)了闯割，直接來(lái)正確的彻消。
首先，需要卸載項(xiàng)目中的postcss-px2rem宙拉。
npm? uninstall postcss-px2rem --save-dev
其次宾尚，安裝postcss-px2rem-exclude
npm? install postcss-px2rem-exclude --save
最后是配置exclude選項(xiàng)，需要注意的是這個(gè)配置在vue.config.js中式不起作用的谢澈，如圖煌贴。
正確的配置位置是項(xiàng)目根目錄下的postcss.config.js文件，如果你的項(xiàng)目沒(méi)有生成這個(gè)獨(dú)立文件锥忿，就需要在你的package.js里設(shè)置牛郑。
postcss.config.jsmodule.exports= {
? plugins: {
? ? autoprefixer: {},
? ? "postcss-px2rem-exclude": {
? ? ? remUnit: 75,
? ? ? exclude: /node_modules|folder_name/i
? ? }
? }
};
package.json"postcss": {
? ? "plugins": {
? ? ? "autoprefixer": {},
? ? ? "postcss-px2rem-exclude":{
? ? ? ? ? "remUnit":75,
? ? ? ? ? "exclude":"/node_modules|floder_name/i"? ? ? }
? ? }
? },
ok，完成敬鬓。
