vue-cli3.0 结合postcss-pxtorem和lib-flexible实现移动端适配，解决第三方组件库样式变小的问题

基于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: ['*']
      }
    }
  }

以上就完成适配啦~