I. Plug-ins used

(1) amfe – flexible

Amfe-flexible is the configuration of scalable layout solution, mainly set 1rem to viewWidth/10

(2) postcss – pxtorem

Postcss-pxtorem is a way to convert PX to REM format, essentially based on the FONtsize value of the HTML tag, dynamically changing the various units of measurement of the element.

Two, plug-in installation and use

1. Install

npm install amfe-flexible --save

npm install postcss-pxtorem --save

2. Use

(1) Import amFE-flexible in main.js

import 'amfe-flexible'

Postcss-pxtorem: postcss-pxtorem: postcss-pxtorem: postcss-pxtorem: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.js: postcss.config.

The configuration in vue.config.js is as follows:

module.exports = { //... CSS: {loaderOptions: {postcss: {plugins: [require(' postCSs-pxtorem ')({rootValue: 37.5, propList: ['*']}]}}},}Copy the code

In. Postcsrc. Js or postcss.config.js, the configuration is as follows:

Module. exports = {"plugins": {'postcss-pxtorem': {rootValue: 37.5, propList: ['*']}}}Copy the code

  • RootValue Is set by dividing the width of the design draft by 10. Assume that the design draft is 375, that is, rootValue is set to 37.5 (depending on the actual situation).

  • PropList is the attribute that needs to be converted, and the * here means everything is converted

Three, test,

(1) CSS set the width of a class to 375px:

.content{
  width:375px;
}
Copy the code

After running, the browser can find that it has been converted to 10rem, i.e. 375/ set rootValue:

If the preceding information is displayed, postCSS-Pxtorem is successfully configured

(2) When we switch devices (mobile mode) in F12, we can find:

The HTML font size changes with the device width, and the body changes with the DPR of the device. This is implemented by AMFE-Flexible, indicating that the configuration is successful.

Combined with the above, we can use the pixel size of the design to develop for different device screens

  • Iphone678, fix 1px display problem (index.html)

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">