Vue3做REM适配

Vue3 做 REM 适配

1.下载 postcss-pxtorem
npm install postcss-pxtorem --save-dev

2.vue.config.ts配置
// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 1, // 设置1rem = 100px
            propList: ['*'], // 需要转换的属性，* 表示所有
          })
        ]
      }
    }
  }
};

3.main.ts/App.vue配置
// main.ts 或 App.vue 中
function setRem() {
  const baseSize = 1; // 基础的 font-size（根元素的font-size），1px 对应 1rem
  const clientWidth = document.documentElement.clientWidth || window.innerWidth;
  const rem = clientWidth / 1920 * baseSize; // 假设设计稿宽度为375px，屏幕宽度与设计稿宽度的比例计算出根字体大小
  document.documentElement.style.fontSize = `${rem}px`;
}

// 初始化设置根字体大小
setRem();

// 当屏幕大小发生变化时，重新计算根字体大小
window.addEventListener('resize', setRem);