VantUI移动端适配

VantUI的官方设计稿是320px，而设计稿普遍是750px，所以官方推荐配合postcss-pxtorem插件使用：

// eslint-disable-next-line no-undef
module.exports = {
  plugins: [
    // eslint-disable-next-line no-undef
    require('postcss-pxtorem')({
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
      unitPrecision: 8
    })
  ]
};

同时推荐使用lib-flexible用于设置rem基准值，但是viewport单位得到了众多浏览器的支持，所以已经不推荐使用lib-flexible插件。可以使用vw单位来设置root元素的字体大小，其他仍然使用rem。

假设我们期望root元素的字体大小是37.5px（这里可以换成你期望设置的字体大小），那么计算vw的方式：

可视区域的宽度是100vw，也就是375px，所以1px就是0.26666667vw，那么37.5px就是37.5 * 0.26666667vw=10vw(取整）。

现在就可以按照设计稿的尺寸写CSS了，比如，有个元素宽度是100px，直接写100px，不用做什么计算，postcss-pxtorem会自动帮你转换：100/75=1.33333333rem，这里除以75是因为我们设置了rootValue是75。

1.33333333rem再乘以37.5等于50，正好等于设计稿尺寸的一半。

viewport布局

vw已经得到了很多浏览器的支持，如果用vw做单位的，就免去了计算root元素的字体大小的麻烦了，因为它是浏览器的可视区域视口计算。在VantUI官方样例中推荐的是postcss-px-to-viewport插件，但是这个插件并不理想，这里推荐另一款插件cnjm-postcss-px-to-viewport，可以判断是否是VantUI文件来设置不同的视口大小。

module.exports = {
  plugins: {
    'cnjm-postcss-px-to-viewport': {
      viewportWidth: 750,
      unitPrecision: 8,
      customFun({ file }) {
        const designWidth = path.join(file).includes(path.join('node_modules', 'vant')) ? 375 : 750;
        return designWidth;
      }
    }
  }
};