目录：我们在开发移动端项目的时候会遇到不同的机型，比如：iPhone5、iPhone6 / 7等等；而我们需要兼容不同机型的屏幕宽度和大小；以至于在不同的手机上都能看到一样的效果；那么我们就需要做适配兼容处理；今天给大家带来的兼容适配插件是：postcss-pxtorem 和 amfe-flexible的配合使用；

amfe-flexible

第一步：安装

npm i -S amfe-flexible  // 设置 rem 基准值

第二步：在main.js 文件中直接引用即可

import 'amfe-flexible'

当我们设置好以后；可以看到html标签中会出现 font-size

postcss-pxtorem

第一步：安装

npm install postcss-pxtorem --save-dev // 将单位转化为 rem 值

第二步：在文件的根目录下创建 .postcssrc.js 文件

第三步：将一下代码复制在文件中

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 8'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5, // 换算基数，如：你的设计图是750的；那么这儿就可以写成75，如果是375的，那么这儿就写37.5即可
      propList: ['*'],
    },
  },
};

如果在开发的过程中有一些不想被转换的ui库或者说组件的时候就可以在 'postcss-pxtorem' 中添加一下代码 selectorBlackList：表示不进行转换组件，如不想转换为vant组件的ui库；就直接在数组中添加即可；但是这种的话会出现一个问题；那就是vant的所有组件还是按照px的，这样就是造成vant组件这一块不能自适应；所以，这种不推荐

'postcss-pxtorem': {
      rootValue: 37.5, // 换算基数，如：你的设计图是750的；那么这儿就可以写成75，如果是375的，那么这儿就写37.5即可
      selectorBlackList: ['van'], // 忽略ui组件的
       propList: ['*'],
  },

一下推荐的配置是一下这种；由于vant是375的标准；所以直接给他配置成37.5即可，而他会根据配置好的进行转换为rem基准值；这样也就不会出现问题了哈；重启一下项目即可看到效果了；赶紧去试试吧！

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {    // 首先是设计图是 750 的哈
      rootValue ({ file }) {  //  这儿是用来判定是都是自己的元素代码 如果是巨剑的就用37.5 如果不是就用 75
        return file.indexOf('van') !== -1 ? 37.5 : 75
      },
      propList: ['*'],
      exclude: 'github-markdown'
    }
  }
}

注意：如果在启动项目的时候出现这个错误的话，那就是配置过高了，这个时候需要对配置做一些调整；如一下代码

把这串代码删掉

browsers: ['Android >= 4.0', 'iOS >= 8']

换成这串代码；然后重启一下；就不会保存了

overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8"
]

如果有什么不对的地方；欢迎大家补充；相互学习、共勉