背景
在项目使用lib-flexible还有postcss-px2rem实现移动端适配，当我们引入第三方的样式组件库，发现一个问题。那些组件库的样式都变小了。
问题原因
变小的主要原因是第三库 css一依据 data-dpr="1" 时写的尺寸
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
这时我们使用的flexible引入时 data-dpr不是一个写死了的，是一个动态的；就导致这个问题
解决方式
在postcss.config.js中过滤node_modules
具体实现步骤：
第一部分：项目中引入lib-flexible
一、项目中安装lib-flexible
npm install lib-flexible --save
二、在项目的入口main.js文件中引入lib-flexible
import 'lib-flexible'
第二部分：使用postcss-px2rem自动将css中的px转换成rem
一、安装postcss-px2rem
npm install postcss-px2rem --save-dev
二、项目配置postcss
项目开始在vue.config.js（项目创建完初始是没有这个js文件的，需要自己手动创建）中配置的，上代码
module.exports = {
css: {
loaderOptions: {
postcss: {
// 这是rem适配的配置 注意： remUnit在这里要根据lib-flexible的规则来配制，如果您的设计稿是750px的，用75就刚刚好。
plugins: [
require("postcss-px2rem")({
remUnit: 75
})
]
}
}
}
初始的适配方案就完成了，然后可以直接在css或.vue文件中写已px为单位的样式了，到浏览器会自动转为rem。
but but 引入vant的组件库后，问题来了。
试着放了一个简单的cell组件，npm run serve项目跑起来，组件中的样式都变小了，F12看了一下果然组件的样式也都被转换成了rem。
解决方案一：
将第三方组件的css文件复制出来第三方库的css代码px统一扩大2倍，或者用全局替换将px替换为px/*no*/。这个方案不太好，具体操作可以参考以下两篇文章：https://segmentfault.com/a/1190000014575890 和 https://blog.csdn.net/weixin_42464312/article/details/82769805。
解决方案二：
npm uninstall postcss-px2rem --save-dev
其次，安装postcss-px2rem-exclude
npm install postcss-px2rem-exclude --save
最后是配置exclude选项，需要注意的是这个配置在vue.config.js中式不起作用的，如图。
正确的配置位置是项目根目录下的postcss.config.js文件，如果你的项目没有生成这个独立文件，就需要在你的package.js里设置。
postcss.config.js
module.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"
}
}
},
本篇文字就到这里了，动手试试~