Vue 3 将px单位自动转换为rem单位

在Vue 3项目中，要实现将px单位自动转换为rem单位 (element plus,其它UI组件库应该也是一样的)

1. **设置基准字体大小（Root Font Size）：首先，在你的CSS样式中，设置一个基准字体大小（我一般设置为为10px），这将成为你的rem单位的基准。你可以将以下代码添加到你的CSS文件中：

html {
  font-size: 10px;
}

2. **安装并配置postcss-pxtorem**：为了将px单位自动转换为rem，你可以使用PostCSS插件`postcss-pxtorem`。首先，确保你的Vue项目已经配置了PostCSS。如果还没有配置，请按照以下步骤配置：

- 安装必要的依赖：

npm install postcss postcss-preset-env postcss-pxtorem --save-dev

- 创建一个PostCSS配置文件，通常命名为`postcss.config.js`，并添加以下内容：

  module.exports = {
       plugins: {
         'postcss-preset-env': {
           autoprefixer: true,
         },
         'postcss-pxtorem': {
           rootValue: 10, // 基准字体大小
           unitPrecision: 5, // 转换后的rem保留小数点位数
           propList: ['*'], // 要转换的属性，默认转换所有属性
         },
       },
     };

3.在Vue项目中使用：在你的Vue组件样式中，可以使用px单位，插件将会自动将其转换为rem单位：

<template>
  <div class="hello">
    <!-- your content here -->
  </div>
</template>
 
<style scoped>
.hello {
  font-size: 24px; /* 使用px单位 */
  padding: 10px; /* 使用px单位 */
}
</style>

在上述配置中，`postcss-pxtorem`插件会自动将样式中的px单位转换为rem单位，基准字体大小为10px。

4. **运行项目**：运行你的Vue项目，并检查生成的CSS是否已经将px单位转换为rem单位。

5.  监听浏览器 resize， 动态修改rem转换的基准字体大小，达到在缩小屏目时，自动缩小字体

onMounted(() => {
  remSetting()
})

const remSetting = () => {
  // 字体大小自适应
  function setRem(setWidth: number) {
    var width = window.innerWidth // 获取当前屏幕的宽
    if (width > setWidth) {
      width = setWidth
    }

    //  或685.7
    if (width < 900) { // 设定最小宽度，小于这个宽度，字体不再缩小
      width = 900
    }
    // 动态获取rem的值
    document.querySelector('html').style.fontSize = (width / setWidth) * 10 + 'px'
  }
  setRem(1440) // 屏幕宽度小于1440后开始缩放（这个值参考设计师给的原型图的尺寸大小来设定）
  window.addEventListener('resize', () => setRem(1440), false)
}

请注意，这只是一种可能的实现方式，具体的配置可能因项目需求而异。确保在实施之前，了解你的项目需要以及如何最好地满足这些需求。此外，不要忘记测试你的样式以确保转换工作正常。