移动端适配postcss-px-to-viewport ，兼容vant

之前做移动端是用rem布局来做自适应，前博客有提到。就是把px 根据根元素转化为rem。

现在发现了一个新的技术方案。把px 转化为转换成viewport单位，是根据视图的宽高来计算。vw本质上还是一种百分比单位，100vw即等于100%，即window.innerWidth

用法如下：

一：安装

npm install postcss-px-to-viewport --save-dev

二：在vue的根目录下新建postcss.config.js，引入如下代码：

module.exports = {
  plugins: {
     autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度，即小数点位数
      propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
      minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false // 是否处理横屏情况
    }
  }
}

完成之后，项目中的px 就会自动变为vw。

注意：由于移动端用的UI 框架为vant ，但是vant 设计的宽度为375 ，设计稿的宽度为750，这样用的话，会导致vant 的所有尺寸都会变小一倍。当然我们也可以把上面viewportWidth改为375，然后把UI 图除以2，然后计算。

当然，我们也可以根据不同的文件来适配不同的尺寸，vant 的适配375，自己写的适配750。

代码如下：

const path = require('path');

module.exports = ({ file }) => {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;

  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px",
        viewportWidth: designWidth,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        exclude: [],
        landscape: false
      }
    }
  }

}