记录移动端适配的坑

原方案（适用于ui库的设计稿和自己的设计稿是同一宽度）

做移动端时，之前用的lib-flexible和postcss-px2rem

• main.js 添加 import 'lib-flexible'动态设置html的font-size为屏幕宽度的1/10
• vue.config.js里加下面这一块 对postcss-px2rem配置

  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            // remUnit 取设计稿的1/10 ，如设计稿是375 则设置为37.5 设计稿为750 设置为75
            remUnit: 37.5
          })
        ]
      }
    }
  },

• 但是设计稿是750的 vant是375的，用px2rem把px转成rem会导致转化后的自己的css样式px转rem再结合html的font-size将变大一倍

改用方案（可差异化配置 适用于设计稿为750且要用vant的情况）

• 改用 npm i postcss-pxtorem@5.1.1 注意版本，如果直接安装的会报错
• postcss.config.js配置 (vue.config.js里就不要配postcss了)

const pxtorem = require('postcss-pxtorem')

module.exports = ({ file }) => {
  let isVant = file && file.dirname && file.dirname.indexOf("vant") > -1;
  let rootValue = isVant ? 37.5 : 75; // 判断条件 决定转化rem时的除数

  return {
    plugins: {
      "postcss-pxtorem": {
        rootValue: rootValue, //750px-> 10rem ->(font-size:37.5px) 375px   
        unitPrecision: 5, //保留小数位    
        propList: ["*"],
        //selectorBlackList: ["van-"], //（数组）要忽略的选择器并保留为px。 过滤的类名
        minPixelValue: 2 // （数字）设置要替换的最小像素值 解决 1px 问题 //所有小于设置的样式都不被转换   
      }
    }
  }
}