Postcss-pxtorem plugin used

I. Settings in VUE-CLI2:

Module.exports = {plugins: {plugins: {}'postcss-pxtorem':{rootValue: 75, unitPrecision: 5, // Minimum precision, propList: [The '*'.'! font*'], / /! SelectorBlackList: [], minPixelValue:2 // Replace the minimum pixel value}}}Copy the code

Ii. Settings in VUE-CLI3:

Module.exports = {plugins: {autoprefixer: {},'postcss-pxtorem': {
      rootValue: 75,
      unitPrecision: 5,
      propList: [ The '*'.'! font*' ],
      selectorBlackList: [],
      minPixelValue: 2
    }
  }
}
Copy the code

Lib – flexible use

Set the meta tag attribute of index. HTML

<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the minimum - scale = 1.0, the maximum - scale = 1.0, user - scalable = no">
Copy the code

Install lib-Flexible

npm install --save lib-flexible
Copy the code

Introduce lib-flexible in main.js

import 'lib-flexible'
Copy the code

4. Use PxCook to open the UI design draft

4.1 Switching to the Development Panel 4.2 Unit Selection: Rem 4.3 Cardinality set to 64 if the UI design is based on 640px and 75 if the UI design is based on 750px. 4.4 The decimal point must be set to this decimal otherwise it will cause problems. The more decimal places, the more accurate.) 4.5 The CSS is the same as the REM displayed in the UI designCopy the code

5, do not use the use of Pxcook, can directly write a SCSS calculation method (hand washing scheme)

5.3 Lib-flexible Will automatically add a meta name="viewport" tag to the HTML head. If there is a meta Name ="viewport" tag, you need to comment it out because lib-Flexible will use it by default. rem.@function px2rem($px) {$rem: $function px2rem($px) {$rem: 75; @return ($px / $rem) + rem; } px2rem(10)Copy the code