vant 移动端适配Rem

1. 使用lib-flexible 设置 rem 基准值（html标签字体大小）

安装依赖：npm i amfe-flexible
main.js 引入：import ‘amfe-flexible’

2. postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

安装依赖： npm install postcss-pxtorem -D
在项目根目录中创建 postcss.config.js文件，如下：

//postcss配置文件。代码参照vant官网
module.exports = {
  plugins: {
  // 自动添加浏览器厂商声明前缀，用来兼容不同都浏览器
  // vueCli 已经在内部配置了 autoprefixer &写在这里也对，
  // 但是，写在这里控制台编译会出现警告
  // 原因是：vueCli是通过项目中 .browserslistrc 文件来配置要兼容环境信息。
  // 所以写在这里是冲突的，还是注释掉吧
  //  autoprefixer: {
  //   browsers: ['Android >= 4.0', 'iOS >= 8'],
  //  },
    //把px转为rem
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

配置完毕后，重新启动服务；
刷新页面，可以通过检查控制台 看px是否转为rem；
测试发现，在style标签内设置px，检查控制台时就会自动转换为rem；但是不支持行内样式，也就是说行内写px不会被转成rem。

// 冲突问题：将上边的代码写在 .browserslistrc 文件中就可以了，如下：
Android >= 4.0
iOS >= 8