Vue 项目 px自动转rem实现

1.新建resizescale.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 });
}

2.main.js中引入

import { resizeScale } from '@/utils/resizeScale';



//在最后执行px转rem
resizeScale();

3.新建 postcss.config.js 文件

module.exports = {
  plugins: {
    autoprefixer: {},
    postcss: {
      plugins: [
        require('postcss-pxtorem')({
          rootValue: 13,
          unitPrecision: 5,
          propList: ['*'],
          selectorBlackList: ['no-conversion-'],//设置忽略的类名
          replace: false,
          mediaQuery: false,
          minPixelValue: 3,
          exclude: /node_modules/i

        }),
      ]
    }
  }
}