在移动端开发中,常常会用到rem相对单位来做自适应。最常用到一种方法就是使用lib-flexible和px2rem来做到自动转换px单位
但是,这个方法是有缺陷的,当引入第三方UI库时,会发现第三方的UI库的样式也自动转化成rem了。所以样式会变小。
npm install px2rem-loader --save
npm install amfe-flexible --save
使用postcss-px2rem-exclude可以解决这个问题
首先,需要卸载项目中的postcss-px2rem。
npm uninstall postcss-px2rem --save-dev
其次,安装postcss-px2rem-exclude
npm install postcss-px2rem-exclude --save
最后是配置exclude选项,需要注意的是这个配置在vue.config.js中式不起作用的
在根目录下新建.postcss.config.js
module.exports= {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
remUnit: 75,
exclude: /node_modules|folder_name/i
}
}
}