Implementation of postcss-pxtorem mobile adaptation

npm install postcss-pxtorem -D

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 32, //The result is: design element size/32 (generally, the root element size of a 750px design is set to 32). For example, if the element width is 320px, the final page will be converted to 10rem
      propList: ['*'], //property selector, * indicates general selectorBlackList:[] ignores the selector.ig- indicates that all the selectors starting with .ig- will not be converted}
  }
}

// rem proportional adaptation configuration file // Base size const baseSize = 750 // Note that this value must be consistent with the rootValue in the postcss.config.js file // Set rem function function setRem () {
  // The current page width is relative to the 375 width scaling ratio, which can be modified according to your needs. Generally, the design draft is 750 width (you can get the design drawing and modify it for convenience).
  const scale = document.documentElement.clientWidth / 375
  // Set the font size of the root node of the page ("Math.min(scale, 2)" means the maximum magnification ratio is 2, which can be adjusted according to actual business needs)
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// Initialize setRem()
// Reset rem when changing window size
window.onresize = function () {
  setRem()
}