1. Convert PX to VW

Install postcss – px – to – the viewport

npm install  postcss-px-to-viewport  -D
yarn add postcss-px-to-viewport -D
Copy the code

Configure mobile adaptation

Create a new file postcss.config.js under the project root directory and add the following code to the file:

Module. exports = {plugins: {autoprefixer: {}, 'postcss-px-to-viewport': {// exports = {plugins: {autoprefixer: {}, 'postcss-px-to-viewport': {// exports = {plugins: {autoprefixer: {}, 'postcss-px-to-viewport': { // viewportHeight: 1334, // Specify the number of decimal places where the px is converted to the viewport unit value unitPrecision: Vw viewportUnit: 'vw' is recommended. // Specify a class that does not convert to a viewportUnit. It can be customized and can be added as many times as possible. ['.ignore'], // less than or equal to '1px' does not convert to window units, you can also set to the value you want minPixelValue: 1, // Allow to convert 'px' mediaQuery: false} 'insert code pieces here'}}Copy the code

After the configuration is complete, restart the service and review the elements in the browser. You can see that the px originally written has been converted to vw

. Home [data - v - 5954443 - c] {the font - size: 4.267 vw; }Copy the code

2. Convert PX to REM

Install postcss – pxtorem

npm install postcss-pxtorem --save
Copy the code

Modify the /build/utils.js file

Find the postcssLoader code block

onst postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
Copy the code

Is amended as:

const postcssLoader = {
  loader: 'postcss-loader',
  options: {
   sourceMap: options.sourceMap,
   plugins: [
    require('postcss-pxtorem')({
     'rootValue': 75,
     propList: ['*']
    })
   ]
 }
}

Copy the code

Note: it will automatically convert PX to REM, no need to worry about the compatibility of mobile units, just use PX, the browser will automatically change to REM.