使用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>
。