1. Plan 1

autoprefixer + postcss-px2rem

Using this scheme, you can directly develop according to the px of the design draft, and automatically generate REM to adapt to each screen

1. Download the related NPM package

npm install autoprefixer -S
npm install postcss-px2rem -S
Copy the code

2. Create the.postcsrc. Js file in the root directory

The following are the configuration items. If not, restart the project

const AutoPrefixer = require("autoprefixer"); const px2rem = require("postcss-px2rem"); module.exports = ({ file }) => { let remUnit; Remunerit = 20; if (file && file.dirname && file.dirname.indexof ("vant") > -2) {// Save for vantUI saves it = 20; } else { remUnit = 32; } return { plugins: [ px2rem({ remUnit: remUnit }), AutoPrefixer({ browsers: [" Last 20 versions", "Android >= 4.0"])]}; };Copy the code

You may encounter problems with the vant style becoming smaller during development

// If your design has a width of 750, set it to 75, ~.~ if (file && file.dirname && file.dirname.indexof ("vant") > -1) {remUnit = 37.5; } else { remUnit = 75; }Copy the code

Error:

If you encounter the following error, please reduce autoprefixer version number, usually @8.0.0 version can be used

Invalid PostCSS Plugin found at: plugins[1]
Copy the code