移动端适配方案

1.postcss-px-to-viewport px转化vw进行适配

// postcss.config.js 文件
module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
      // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportWidth: 750,
      // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      // viewportHeight: 1334,
      // 指定`px`转换为视窗单位值的小数位数
      unitPrecision: 3,
      // 指定需要转换成的视窗单位，建议使用vw
      viewportUnit: 'vw',
      // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      selectorBlackList: ['.ignore'],
      // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      minPixelValue: 1,
      // 允许在媒体查询中转换`px`
      mediaQuery: false
    }
  }
}

2.postcss-pxtorem px转化rem进行适配

• postcss-pxtorem 相较于后者，还在保持更新，且与 postcss-plugin-px2rem 相差无几

• postcss-plugin-px2rem postcss-px2rem增强版，支持类名忽略，配置项较多

• postcss-px2rem 配置项较少，可以废弃了

注意： 上述插件需结合amfe-flexible来使用，请自行安装 npm i amfe-flexible -S。以上两种插件适配，比较推崇第一种。大漠在github仓库发表了声明：

由于 viewport 单位得到众多浏览器的兼容，lib-flexible 这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用 viewport 来替代此方案。