vue安装postcss-pxtorem

1. 安装   

      "postcss": "^8.3.11",
        "postcss-pxtorem": "5.1.1",

2. 在config.js里面插入转换规则

 postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 16,
            unitPrecision: 5,
            propList: ['*'],
            selectorBlackList: ['no-conversion-'],
            replace: false,
            mediaQuery: false,
            minPixelValue: 3,
            exclude: /node_modules/i
 
          }),
        ]
      }

3. 在src文件夹下新建resetSize.js文件

resetSize.js文件内容

export function resizeScale() {
    const docEle = document.documentElement;
    const screenRatioByDesign = 16 / 9;
    function setHtmlFontSize() {
      const screenRatio = docEle.clientWidth / docEle.clientHeight;
      let fontSize =
        ((screenRatio > screenRatioByDesign ? screenRatioByDesign / screenRatio : 1) *
          docEle.clientWidth) /
        10;
      // 增加192与16的对应关系
      fontSize = (fontSize / 192) * 16;
      docEle.style.fontSize = `${fontSize.toFixed(3)}px`;
    }
   
    setHtmlFontSize();
   
    window.addEventListener(
      'pageshow',
      function (e) {
        if (e.persisted) {
          // 浏览器后退的时候重新计算
          setHtmlFontSize();
        }
      },
      false
    );
    window.addEventListener('resize', setHtmlFontSize, { passive: true });
  }

4. 在main.js文件中引入resizeScale

import { resizeScale } from './resetSize.js'
resizeScale()

5. 重启项目

如果不想要转换就用PX