使用 CSS 变量实现悬停时动态改变字体大小-html教程-PHP中文网

使用 CSS 变量实现悬停时动态改变字体大小

心靈之曲

发布： 2025-09-27 19:17:00

原创

506人浏览过

使用 css 变量实现悬停时动态改变字体大小

本文将详细介绍如何使用 CSS 变量在悬停状态下动态改变字体大小，并针对不同屏幕尺寸进行适配。核心思想是利用 CSS 变量存储字体大小，并在 :hover 伪类中通过 calc() 函数修改该变量的值，从而实现字体大小的动态变化。

利用 CSS 变量定义字体大小

首先，我们需要定义一个 CSS 变量来存储字体大小。通常，我们会将变量定义在 :root 伪类中，使其具有全局作用域。这样，我们就可以在整个文档中使用该变量。

:root {
  --font-size: 1.25rem;
}

h1 {
  font-size: var(--font-size);
}

登录后复制

在上面的代码中，我们定义了一个名为 --font-size 的 CSS 变量，并将其初始值设置为 1.25rem。然后，我们将 h1 元素的 font-size 属性设置为 var(--font-size)，这意味着 h1 元素的字体大小将使用 CSS 变量 --font-size 的值。

针对不同屏幕尺寸设置字体大小

为了在不同屏幕尺寸下显示合适的字体大小，我们可以使用媒体查询（Media Queries）来修改 CSS 变量的值。

立即学习“前端免费学习笔记（深入）”；

:root {
  --font-size: 1.25rem;
}

@media only screen and (max-width: 595px) {
  :root {
    --font-size: 1rem;
  }
}

h1 {
  font-size: var(--font-size);
}

登录后复制

在上面的代码中，我们使用 @media 规则来检测屏幕宽度是否小于或等于 595px。如果是，我们将 :root 伪类中的 --font-size 变量的值修改为 1rem。这意味着在小屏幕设备上，h1 元素的字体大小将为 1rem。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

实现悬停时动态改变字体大小

为了在悬停状态下动态改变字体大小，我们可以使用 :hover 伪类和 calc() 函数。

:root {
  --font-size: 1.25rem;
}

@media only screen and (max-width: 595px) {
  :root {
    --font-size: 1rem;
  }
}

h1 {
  font-size: var(--font-size);
}

h1:hover {
  font-size: calc(var(--font-size) * 1.15);
}

登录后复制

在上面的代码中，我们使用 h1:hover 选择器来选择鼠标悬停在 h1 元素上的状态。然后，我们将 h1 元素的 font-size 属性设置为 calc(var(--font-size) * 1.15)。calc() 函数用于计算 CSS 属性的值。在这里，我们将 CSS 变量 --font-size 的值乘以 1.15，这意味着当鼠标悬停在 h1 元素上时，其字体大小将增加 15%。

完整示例

以下是一个完整的示例，演示了如何使用 CSS 变量在悬停时动态改变字体大小，并针对不同屏幕尺寸进行适配。

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --font-size: 1.25rem;
}

@media only screen and (max-width: 595px) {
  :root {
    --font-size: 1rem;
  }
}

h1 {
  font-size: var(--font-size);
}

h1:hover {
  font-size: calc(var(--font-size) * 1.15);
}
</style>
</head>
<body>

<h1>Just a Test</h1>

</body>
</html>

登录后复制

这段代码会创建一个标题 "Just a Test"。当鼠标悬停在标题上时，字体大小会增加。在屏幕宽度小于或等于 595px 的设备上，标题的初始字体大小会更小。