vue vant 引入pxtorem 移动端适配不成功 如何设置pxtorem 移动端rem适配

问题：在vue+vant项目中设置pxtorem，但是在移动端小屏下没适配失败

解决：

1.安装：npm install postcss-pxtorem --save-dev

2.Vue项目中webpack配置步骤：

   在vue.config.js 的下的loaderOptions中添加配置：

module.exports = {
  publicPath: '/',
  productionSourceMap: false,
  css: {
    loaderOptions: {
      postcss:{
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 16,
            unitPrecision: 5,
            propList: ['*'],
            selectorBlackList: [],
            replace: true,
            mediaQuery: false,
            minPixelValue: 0,
            exclude: /node_modules/i
          }),
        ]
      },
    }
  },
}

3.根据屏幕的大小计算合理的html 元素font-size 值,这里新增一个rem.js文件，写入以下函数，函数自执行，rem.js放入static中，     在main.js中引入，函数的作用是设置不同分辨率屏幕下html 的font-size大小。

(function () {
  var initFontSize = 16
  var iPhone6Width = 375
  var clientWidth = window.document.documentElement.clientWidth || iPhone6Width
  var newFontSize = initFontSize * (clientWidth / iPhone6Width)
  document.documentElement.style.fontSize = newFontSize + 'px'
})()

参考博客（更详细）：http://raboninco.com/1dWnZ