postcssPx2Rem的使用

安装postcss-px2rem
npm install postcss-px2rem --save

在vite.config.ts中引入并配置
import postcssPx2Rem from 'postcss-px2rem-exclude';

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/css/variate.scss";`
      }
    },
    postcss: {
      plugins: [
        postcssPx2Rem({
          remUnit: 16, // 基准像素值，根据设计图调整
          // exclude: /node_modules/ // 排除 node_modules 下的文件
        })
      ],
    }
  }

在utils下面新建一个pxrem.js文件，写入

const baseSize = 16
// 设置 rem 函数
function setRem() {
    console.log("setRem-----111");
    // 页面宽度相对于 1920宽的缩放比例，根据需要修改。
    const scale = document.documentElement.clientWidth / 1920
    // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，根据需要修改）
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'

}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    console.log("改变窗口大小1");
    setRem()
}
//这里有些监听不到window.onresize 的变化 可以换成以下写法
window.addEventListener('resize', function () {
    console.log("改变窗口大小1");
    setRem();
});

将pxrem.js引入main.ts

import '@/utils/pxrem.js'