基于vue做了一个移动端的项目，同时引入的了第三方组件库（有赞vant）。当时选择用rem件来做适配。其他内容可以正常显示，但是引起了第三方插件内容变小的问题。现将解决方法整理出来。
原因
第三方组件库变小的原因主要是因为第三方组件库已经做了适配，依据的data-dpr="1"时写的。而引入插件进行rem适配时，data-dpr不是一个写死的，而是一个动态的了。
走过的弯路
当时试过px2rem 、 postcss-px2rem-exclude等插件，以及尝试过修改配置代码node_modules/postcss-px2rem-exclude/lib/index.js；希望适配的时候忽略第三方组件。这样做安卓机有效果，但是苹果机还是没有效果的。
解决思路
认真看了vant组件的介绍，选择用官网推荐的postcss-pxtorem和lib-flexible来实现rem适配。其中的rootValue:37.5 不建议修改。注意，若使用37.5则设计稿也建议使用375为标准的，尝试过使用75的，但是有赞自身组件在真机上还是有点奇怪。下面说明，引用有赞组件官网。
Rem 适配
Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具
- postcss-pxtorem 是一款postcss插件，用于将单位转化为rem
- lib-flexible 用于设置rem基准值
步骤
（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文件中进行配置
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue:37.5,
propList: ['*']
}
}
}
以上就完成适配啦~
