Vue vant introduces pxtorem mobile terminal adaptation fails, how to set pxtorem mobile terminal rem adaptation

Problem: pxtorem is set in the vue+vant project, but it does not fail to adapt to the small screen of the mobile terminal

solve:

1. Installation: npm install postcss-pxtorem --save-dev

2. Webpack configuration steps in the Vue project:

   Add configuration in loaderOptions under vue.config.js:

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. Calculate the reasonable font-size value of the html element according to the size of the screen, here is a new rem.js file, write the following function, the function is self-executing, rem.js is placed in static, and the function is introduced in main.js. The function is to set the font-size of html under different resolution screens.

(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'
})()

Reference blog (more detailed): http://raboninco.com/1dWnZ