You can skip the ha, I will remember once, convenient for the next time to use the good copy, ha ha

The plug-in

postcss-pxtorem
Copy the code

configuration

1. Create postcss.config.js in the root directory

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android > = 4.0'.'iOS >= 7']},/ / vant 37.5 [link] (https://github.com/youzan/vant/issues/1181)
    'postcss-pxtorem': {
      rootValue: 75.propList: [The '*'].selectorBlackList: ['van-']}}}Copy the code

Note that selectorBlackList: [‘van-‘] is used to filter out the CSS of the Vant library. The CSS unit of the Vant library is PX. If you do not filter, the UI library will become smaller

2. New rem. Js

// Set the rem function
function setRem () {

    // 320 defaults to 16px; 320px = 20rem ; Each element px based on /16
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
// Get the HTML Dom element
    let htmlDom = document.getElementsByTagName('html') [0];
// Set the font size for the root element
    htmlDom.style.fontSize= htmlWidth/10 + 'px';
}
/ / initialization
setRem();
// Resets rem when changing the window size
window.onresize = function () {
    setRem()
}
Copy the code

Note here that the 10 of htmlWidth/10 multiplied by the value of rootValue should be the total width of the design

3. Add rem.js to vue’s main.js

All right, let’s go and that’s it