vue mobile terminal adaptation (px to vw) postcss-px-to-viewport configuration

Install postcss-px-to-viewport

npm install postcss-px-to-viewport

New postcss.config.js file in the root directory

// postcss.config.js file 
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // The unit to be converted, the default is "px" 
      viewportWidth: 375, // The width of the window, corresponding to the width of our design draft 
      viewportHeight: 1334, // The height of the window, according to the 375 device Specify the width, generally 667, or you can not configure 
      unitPrecision: 13, // Specify the number of decimal places converted from `px` to the unit value of the window (it is often impossible to divide) 
      propList: ['*'], // Can be converted to vw's property list 
      viewportUnit: 'vw', // Specify the window unit to be converted to, it is recommended to use vw 
      fontViewportUnit: 'vw', // Viewport unit used by font 
      selectorBlackList: ['.ignore-', '.hairlines' ], // Specify the class that is not converted to window units, can be customized, can be added indefinitely, it is recommended to define one or two common class names 
      minPixelValue: 1, //Less than or equal to `1px` is not converted to viewport units, you can also set it to the value you want 
      mediaQuery: false , // Allow conversion in media queries` px` 
      replace: true , // Whether to directly change the attribute value, and Do not add spare attribute 
      exclude: [
         / RightBar / ,
         /gotop.vue/ ,
      ], // Ignore files under certain folders or specific files, such as the file under 'node_modules' 
      landscape: false , // Whether to add media query conditions generated according to landscapeWidth @media (orientation: landscape) 
      landscapeUnit: 'vw' , // Unit used in 
      landscape landscapeWidth: 1134 // Viewport width 
used in landscape     )
  }
}