Postcss-pxtorem and AMFE-Flexible in VUE practical REM automatic conversion plug-in (PostCSS-PXTOREM and AMFE-Flexible matters mobile adaptation) implementation idea:

Postcss-pxtorem convert PX to REM

② AmFE-Flexible plug-in is used to initialize the HTML root node. After configuring these two plug-ins, we can use the px of the design draft to develop.

Install postCSs-pxtorem –save-dev Npm install amfe-flexible –save

Import ‘amfe-flexible’ from vue main.js;

3. In. Postcsrc. Js, the vuE-Cli3.0 version is configured in postcss.config.js

"Plugins ": {' Autoprefixer ': {browsers: ['Android >= 4.0', 'iOS >= 7']}, 'postCSS-pxtorem ': {rootValue: 37.5, propList: ['*']}}}Copy the code

The basic configuration is complete. You can set rootValue to 75 if your design is 750 base length

Reproduced in: blog.csdn.net/qq_41656414…