Vue3基于rem比例缩放方案示例详解

引言

在Web开发中，页面的响应式设计（不同屏幕尺寸适配）是一个很重要的问题。其中一个方案是使用 rem 比例缩放方案。本文将介绍如何在Vue3中使用 rem 缩放方案实现响应式页面，并通过两个示例详细讲解具体实现。

什么是rem?

rem是css中的一个长度单位，相对于根元素字体的大小（font-size）进行计算。可以通过设置根元素的字体大小，来对整个页面中的元素进行比例缩放。在移动端页面应用广泛。

使用rem实现响应式页面

在Vue3中，实现 rem 比例缩放方案的核心就是设置根元素的字体大小。常见的实现方式是通过调用 JavaScript 设置根元素字体大小。下面，我们将通过两个示例，详细介绍如何实现基于 rem 的响应式页面。

示例1：基于窗口大小设置根元素的字体大小

该示例通过监听窗口大小的变化，动态计算根元素字体大小，以此实现响应式页面。

<template>
  <div class="container">
    <div class="box">This is a box</div>
  </div>
</template>

<script>
export default {
  mounted() {
    const setRem = () => {
      const clientWidth = document.documentElement.clientWidth //获取窗口宽度
      document.documentElement.style.fontSize = clientWidth / 10 + 'px' //设置根元素字体大小，假定 1rem = 10px
    }
    setRem() //初始化
    window.addEventListener('resize', setRem) //添加窗口大小变化监听
  }
}
</script>

<style>
.box {
  width: 6rem; /* rem缩放时，此处的6rem即对应css中的60px */
  height: 6rem;
  background-color: #007bff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

在该示例中，我们首先在mounted生命周期中调用 setRem() 进行初始化，然后通过 window.addEventListener()，为窗口大小变化添加监听事件，在每次窗口大小发生变化时，重新调用 setRem() 计算根元素字体大小（假定 1rem = 10px），实现响应式效果。

示例2：基于设备dpr设置根元素的字体大小

该示例通过获取设备的dpr（像素比），动态计算根元素字体大小，以此实现响应式页面。

<template>
  <div class="container">
    <div class="item">This is a box1</div>
    <div class="item">This is a box2</div>
  </div>
</template>

<script>
export default {
  mounted() {
    const setRem = () => {
      const docEl = document.documentElement
      const clientWidth = docEl.clientWidth
      const dpr = window.devicePixelRatio || 1
      docEl.setAttribute('data-dpr', dpr)
      docEl.style.fontSize = `${clientWidth * dpr / 10}px`
    }
    setRem()
    window.addEventListener('resize', setRem)
  }
}
</script>

<style>
.item {
  width: 3rem;
  height: 3rem;
  background-color: #007bff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

在该示例中，我们通过获取 window.devicePixelRatio 获取设备的像素比，使得根元素字体大小与屏幕分辨率成比例，实现了更加精准的响应式效果。

结论

本文通过两个实例详细介绍了Vue3中如何使用 rem 实现响应式页面效果。以上两种实现方式，都是根据实际工程需要根据页面和设备进行优化的实现方式。使用rem，可以帮助我们实现更加灵活、高效、精度更高的响应式布局。