手机端vue+vant+rem项目适配750px设计稿的配置

手机端页面开发，使用vue，UI框架用vant，设计稿是750px，单位用rem

vant是按照375px设计稿开发，为单位的，如果配置根字体大小为37.5，设计稿就无法还原，配置75，vant组件就变小了。

很是苦恼，经过一番搜索，按照如下配置.postcssrc.js文件，就可以完美解决问题

module.exports = ({ file }) => {

  let isVant = file && file.dirname && file.dirname.indexOf("vant") > -1;

  let rootValue = isVant ? 37.5 : 75; // 判断条件 请自行调整

  return {

    plugins: {

      autoprefixer: {

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

      },

      "postcss-pxtorem": {

        rootValue: rootValue, //结果为：设计稿元素尺寸/75，设计稿宽 750,最终页面会换算成 10rem      

        unitPrecision: 5, //保留小数位    

        propList: ["*"],

        //https://github.com/youzan/vant/issues/1181#issuecomment-487305533

        //selectorBlackList: ["van-"], //（数组）要忽略的选择器并保留为px。 过滤的类名

        minPixelValue: 2 // （数字）设置要替换的最小像素值 解决 1px 问题 //所有小于设置的样式都不被转换   

      }

    }

  }

}

参考  //https://www.jianshu.com/p/20dad3f93216