使用JavaScript控制rem单位实现动态响应式设计

最新推荐文章于 2025-04-01 11:42:34 发布

HWL5679

最新推荐文章于 2025-04-01 11:42:34 发布

阅读量751

点赞数 13

文章标签： javascript 开发语言 ecmascript vue.js

本文链接：https://blog.csdn.net/H2608520347/article/details/137790406

版权

使用JavaScript控制rem单位实现动态响应式设计，根据视口（viewport）的宽度来设置根元素的字体大小。以下是一个简单的JavaScript代码示例，用于设置rem基准值：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Rem Dynamic Sizing</title>  
<style>  
  html {  
    font-size: 16px; /* 默认字体大小，会被JS覆盖 */  
  }  
  .box {  
    width: 7.8125rem; /* 125px / 16px = 7.8125rem */  
    height: 7.8125rem;  
    background-color: skyblue;  
  }  
</style>  
</head>  
<body>  
  
<div class="box">动态rem尺寸示例</div>  
  
<script>  
// 获取视口宽度  
function setRem() {  
  const baseFontSize = 16; // 基础字体大小，这里设为16px  
  const viewportWidth = window.innerWidth || document.documentElement.clientWidth; // 获取视口宽度  
  const designWidth = 750; // 设计稿宽度，可以根据实际情况设置  
  const rem = viewportWidth / designWidth * baseFontSize; // 根据视口宽度动态计算rem值  
  
  // 设置根元素的字体大小  
  document.documentElement.style.fontSize = rem + 'px';  
}  
  
// 初始化时设置rem  
setRem();  
  
// 监听窗口大小变化事件，动态调整rem  
window.addEventListener('resize', setRem);  
</script>  
  
</body>  
</html>

在这个示例中，setRem函数用于计算并设置根元素的字体大小。这个函数首先获取视口的宽度，然后基于设计稿的宽度（在这个例子中是750）来计算出rem值。最后，它将计算出的rem值设置为html元素的font-size。

当页面加载时，setRem函数会被调用一次以设置初始的rem值。同时，通过监听resize事件，当窗口大小变化时，setRem函数也会被调用，以确保rem值始终与视口宽度保持正确的比例关系。

这样，CSS中使用rem单位的元素（如.box）就会根据视口宽度的变化而自动调整大小，实现响应式设计的效果。

在 Vue 3 的 `<script setup>` 语法中

<template>  
  <div class="box">动态rem尺寸示例</div>  
</template>  
  
<script setup>  
import { onMounted, onUnmounted, ref, watchEffect } from 'vue';  
  
// 定义一个响应式引用，用于存储根元素的字体大小  
const fontSize = ref(16); // 初始字体大小为16px  
  
// 设置根元素的字体大小  
function setRootFontSize() {  
  const baseFontSize = 16; // 基础字体大小  
  const designWidth = 750; // 设计稿宽度  
  const viewportWidth = window.innerWidth || document.documentElement.clientWidth; // 视口宽度  
  const newFontSize = (viewportWidth / designWidth) * baseFontSize;  
  document.documentElement.style.fontSize = `${newFontSize}px`;  
}  
  
// 监听窗口大小变化  
function onResize() {  
  setRootFontSize();  
}  
  
// 在组件挂载后设置初始字体大小并添加监听事件  
onMounted(() => {  
  setRootFontSize();  
  window.addEventListener('resize', onResize);  
});  
  
// 在组件卸载前移除监听事件  
onUnmounted(() => {  
  window.removeEventListener('resize', onResize);  
});  
  
// 使用watchEffect来响应式地更新字体大小（可选，如果你需要更精细的控制）  
watchEffect(() => {  
  setRootFontSize();  
});  
</script>  
  
<style scoped>  
.box {  
  width: 7.8125rem; /* 125px / 16px = 7.8125rem */  
  height: 7.8125rem;  
  background-color: skyblue;  
}  
</style>

在这个例子中，使用了 Vue 3 的 Composition API 中的 ref、onMounted 和 onUnmounted 函数。ref 用于创建一个响应式引用，onMounted 和 onUnmounted 分别用于在组件挂载和卸载时执行逻辑。

setRootFontSize 函数计算新的字体大小，并设置到根元素上。onResize 函数是一个事件处理函数，当窗口大小变化时会被调用。

在 onMounted 钩子中，我们调用 setRootFontSize 来设置初始字体大小，并给 window 对象添加 resize 事件监听器。在 onUnmounted 钩子中，我们移除这个事件监听器，以避免内存泄漏。

最后，我们使用 <style scoped> 来定义组件的样式，其中的 .box 类的宽高使用 rem 单位来定义，这样它们就会随着根元素字体大小的变化而自动调整。

请注意，<script setup> 语法是 Vue 3 的新特性，它提供了一种更简洁的方式来编写组件逻辑。这个特性要求你正在使用的构建系统或运行时环境支持 Vue 3。如果你正在使用 Vite、Vue CLI 或其他支持 Vue 3 的工具，那么你应该能够直接使用 <script setup>。