Vue project PC-side adaptation solution (scss)

Preface: Vue project adaptation can be done with the help of plug-ins lib-flexible and postcss-px2rem.

The role of the lib-flexible plugin: set the font size of the html root tag according to the screen size, 1rem is equal to the font size of the root tag.

The role of the postcss-px2rem plugin: convert px to rem, so that we can use the px unit during the development process.

Note: This plugin is not suitable for inline styles. If you use inline styles, postcss-px2rem cannot convert px to rem

The specific usage method is as follows:

1. Download the package (you can use yarn or npm)

1. The yarn command downloads the package

yarn add lib-flexible postcss-px2rem

2. Download the npm command

npm i lib-flexible postcss-px2rem

2. Change the plug-in configuration

1. Change the configuration of the lib-flexible plugin

Find the flexible.js file under lib-flexible in the node_modules folder, and modify the refreshRem function

 function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540* dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

changed to

 function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

2. Configure postcss-px2rem

Add the following code to the vue.config.js file

const px2rem = require('postcss-px2rem')
const postcss = px2rem({
  remUnit: 192, // 设计稿十等分后的值1rem=192px
  remPrecision: 6 // 转化后小数点位数
})

module.exports = {
  css: {
    // PC分辨率端适配
    loaderOptions: {
      css: {},
      postcss: {
        plugins: {
          postcss
        }
      }
    }
  }
}

Note: Modifying the vue.config.js code requires restarting the project

3. Restart the project test

The f12 console checks the html tag. When the font-size of the html tag is set, it means that the lib-flexible plug-in takes effect

Check whether the style px is converted to rem, if it is converted to rem, it will take effect

 ps: During the adaptation process, my unit px was not converted to rem at the beginning, and finally the vue/cli version was reduced from 5.0.8 to 4.5.15 to take effect.

If you use the px2rem-loader plug-in to adapt and configure it in the following way, please note that the px2rem-loader plug-in configuration method does not take effect for scss code, it needs to be css, and scss cannot be used

 chainWebpack: config => {
    config.module
      .rule('css')
      .test(/\.css$/)
      .oneOf('vue')
      .resourceQuery(/\?vue/)
      .use('px2rem')
      .loader('px2rem-loader')
      .options({
        remUnit: 192, // 根据视觉稿，rem为px的十分之一，1920px  192 rem
        remPrecision: 8// 换算的rem保留几位小数点
      })
  }