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

阅读 (419)
Vue3+element plus + vite 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)
}


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

更新于:2024-03-31 10:27:55
返回顶部