Teach you step by step how to implement Vue PC and mobile terminal adaptation

1. Adaptation solution (amfe-flexible + postcss-pxtorem)

amfe-flexible: automatically set the font-size of html according to the screen width
postcss-pxtorem: automatically convert px units to rem

2. Install the plug-in

​​​​​​​npm install postcss-pxtorem --save

npm install amfe-flexible --save

3. Introduce lib-flexible into main.js in the vue project

import 'amfe-flexible';

4. Configure postcss-pxtorem

It can be configured in one of vue.config.js, .postcssrc.js, and postcss.config.js. The weight decreases from left to right. If there is no new file, you only need to set one of them.

1. Configure as follows in vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 37.5,
                        propList: ['*']
                    })
                ]
            }
        }
    },
}

2. Or configure it in .postcssrc.js or postcss.config.js as follows:

module.exports = {
		    "plugins": {
		        'postcss-pxtorem': {
		            rootValue: 37.5,
		            propList: ['*']
		        }
		    }
		}

  Note:
(1) The rootValue is set according to the width of the design draft divided by 10. It is assumed here that the design draft is 375, that is, the rootValue is set to 37.5;

(2) propList is to set the properties that need to be converted. Here * is converted for all.

5. Supplement

If an error occurs, please lower the version and reinstall the dependencies (modify the version in the package.json file to the following, and then run the command npm install in the terminal)

 "dependencies": {
    "amfe-flexible": "^2.2.1",
    "postcss-pxtorem": "^5.1.1",
  },

6. Test whether the configuration takes effect

1. Set the width of a certain class name in css to 375px:

.box{
  width: 375px;
}

2. After running, you can find in the browser that it has been converted to 10rem, which is the rootValue of 375/setting:

3. The above situation indicates that postcss-pxtorem has been configured successfully.