1 Install postCSs-px2REM and px2REm-loader NPM install postCSs-px2rem px2REM-loader --saveCopy the code

2 Create the rem.js equal ratio adaptation file in the util directory under the root directory SRC

// Set the rem function function setRem () {// The current page width relative to 1920 width, can be modified according to your own needs. Const scale = document. DocumentElement. ClientWidth / 1920 / / set the page root node font size (" Math. Min (scale, 2) "refers to the maximum magnification ratio of 2, ) can be adjusted according to actual business requirements document. The documentElement. Style.css. FontSize = baseSize * Math. Min (scale, Rem window.onresize = function () {setRem()}Copy the code

Import './util/rem 'from main.jsCopy the code

4 Go to vue.config.js to configure the plug-in

// const px2rem = require('postcss-px2rem') const postcss = px2rem({baseSize, Need to be the same as in rem.js, remUnit: 16}) // Use equal adaptors module. Exports = {lintOnSave: true, CSS: {loaderOptions: {postcss: { plugins: [ postcss ] } } } }Copy the code