第一部分：項(xiàng)目中引入lib-flexible
一、項(xiàng)目中安裝lib-flexible
npm install lib-flexible --save
二、在項(xiàng)目的入口main.js文件中引入lib-flexible
import 'lib-flexible'
第二部分：使用postcss-px2rem自動將css中的px轉(zhuǎn)換成rem
一、安裝postcss-px2rem?
npm install postcss-px2rem --save-dev
二、配置px2rem-loader
在vue-cli生成的文件中,找到以下文件 build/utils.js,如下圖添加配置
初始的適配方案就完成了，然后可以直接在css或.vue文件中寫已px為單位的樣式了，到瀏覽器會自動轉(zhuǎn)為rem。
因?yàn)榍捌陧?xiàng)目安排不是太趕，ui給的設(shè)計圖也相對簡單，所以自己寫了按鈕組件之類的，適配還挺好，覺得自己棒棒噠~
直到ui的后續(xù)設(shè)計圖出現(xiàn)時間插件，然后就引入了vant的組件庫。
放了一個簡單的cell組件，npm run serve項(xiàng)目跑起來，發(fā)現(xiàn)組件中的樣式都變小了，F(xiàn)12看了一下果然組件的樣式也都被轉(zhuǎn)換成了rem。
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;
}
重啟項(xiàng)目，就可以愉快的用設(shè)計稿上的px了。
注意：坑
不能在index.html的頭部加 name 為 viewport 的 meta 標(biāo)簽，flexible會自動為我們添加！
問題
變小的主要原因是第三庫 css一依據(jù)data-dpr="1"時寫的尺寸
這時我們使用的flexible引入時 data-dpr不是一個寫死了的，是一個動態(tài)的；就導(dǎo)致這個問題
然后就各種查解決方案，網(wǎng)絡(luò)上給的解決方案一個是改寫第三方庫的樣式，還有一個就是讓flexible不編譯第三方庫的文件（忽略ui組件庫的樣式文件）。
解決方案一：
將第三方組件的css文件復(fù)制出來第三方庫的css代碼px統(tǒng)一擴(kuò)大2倍，或者用全局替換將px替換為px/*no*/。我覺的這個方案不太好沒有采用，具體操作可以參考以下兩篇文章：https://segmentfault.com/a/1190000014575890 和 https://blog.csdn.net/weixin_42464312/article/details/82769805。
解決方案二：
使用postcss-px2rem-exclude，網(wǎng)上好多說用這個方法不起作用，經(jīng)過一個下午的折騰才發(fā)現(xiàn)是使用方法不對，我的錯誤方法就不跟你們說了，直接來正確的。
首先，需要卸載項(xiàng)目中的postcss-px2rem。
npm? uninstall postcss-px2rem --save-dev
其次，安裝postcss-px2rem-exclude
npm? install postcss-px2rem-exclude --save
最后是配置exclude選項(xiàng)，需要注意的是這個配置在vue.config.js中式不起作用的，如圖。
正確的配置位置是項(xiàng)目根目錄下的postcss.config.js文件，如果你的項(xiàng)目沒有生成這個獨(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，完成。
