在移動(dòng)端開(kāi)發(fā)中冒萄,常常會(huì)用到rem相對(duì)單位來(lái)做自適應(yīng)。最常用到一種方法就是使用lib-flexible和px2rem來(lái)做到自動(dòng)轉(zhuǎn)換px單位
但是橙数,這個(gè)方法是有缺陷的尊流,當(dāng)引入第三方UI庫(kù)時(shí),會(huì)發(fā)現(xiàn)第三方的UI庫(kù)的樣式也自動(dòng)轉(zhuǎn)化成rem了灯帮。所以樣式會(huì)變小崖技。
npm install px2rem-loader --save
npm install amfe-flexible --save
使用postcss-px2rem-exclude可以解決這個(gè)問(wèn)題
首先,需要卸載項(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中式不起作用的
在根目錄下新建.postcss.config.js
module.exports= {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
remUnit: 75,
exclude: /node_modules|folder_name/i
}
}
}