基于vue做了一個(gè)移動(dòng)端的項(xiàng)目蜓陌，同時(shí)引入的了第三方組件庫(kù)（有贊vant）确虱。當(dāng)時(shí)選擇用rem件來(lái)做適配含友。其他內(nèi)容可以正常顯示，但是引起了第三方插件內(nèi)容變小的問(wèn)題⌒１纾現(xiàn)將解決方法整理出來(lái)窘问。
原因
??第三方組件庫(kù)變小的原因主要是因?yàn)榈谌浇M件庫(kù)已經(jīng)做了適配，依據(jù)的data-dpr="1"時(shí)寫的宜咒。而引入插件進(jìn)行rem適配時(shí)惠赫，data-dpr不是一個(gè)寫死的，而是一個(gè)動(dòng)態(tài)的了荧呐。
走過(guò)的彎路
?? 當(dāng)時(shí)試過(guò)px2rem 汉形、 postcss-px2rem-exclude等插件，以及嘗試過(guò)修改配置代碼node_modules/postcss-px2rem-exclude/lib/index.js倍阐；希望適配的時(shí)候忽略第三方組件概疆。這樣做安卓機(jī)有效果，但是蘋果機(jī)還是沒(méi)有效果的峰搪。
解決思路
??認(rèn)真看了vant組件的介紹岔冀，選擇用官網(wǎng)推薦的postcss-pxtorem和lib-flexible來(lái)實(shí)現(xiàn)rem適配。其中的rootValue:37.5 不建議修改概耻。注意使套，若使用37.5則設(shè)計(jì)稿也建議使用375為標(biāo)準(zhǔn)的罐呼，嘗試過(guò)使用75的，但是有贊自身組件在真機(jī)上還是有點(diǎn)奇怪侦高。下面說(shuō)明嫉柴，引用有贊組件官網(wǎng)。
Rem 適配
Vant 中的樣式默認(rèn)使用px作為單位奉呛，如果需要使用rem單位计螺，推薦使用以下兩個(gè)工具
- postcss-pxtorem?是一款postcss插件，用于將單位轉(zhuǎn)化為rem
- lib-flexible? 用于設(shè)置rem基準(zhǔn)值
步驟
（1）安裝postcss-pxtorem
$ npm install postcss-pxtorem --save-dev
（2）安裝lib-flexible
$ npm i -S amfe-flexible
（3）在main.js中引入lib-flexible
import 'lib-flexible';
（4）在postcss.config.js文件中進(jìn)行配置
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue:37.5,
propList: ['*']
}
}
}
以上就完成適配啦~
