直接改 html 的 font-size 失效是因为 px/em 硬编码不继承根字号，需统一用带单位的 css 变量（如 --fs-h1: 1.875rem）并配合 clamp() 中含 rem 项，且媒体查询和 js 修改必须作用于 :root 并保留单位。
为什么直接改 font-size 在 html 上会失效？
很多人以为给 html 元素设 font-size: 1.25rem 就能全局放大，但实际常发现按钮、第三方组件文字没变——因为这些元素可能用了 px 或硬编码的 em，压根不继承根字号。真正起效的是：所有用到字号的地方，都得显式依赖 var(--fs-base) 这类变量，而不是靠继承链“猜”根字体变化。
clamp() 里引用 CSS 变量必须带单位
浏览器解析 clamp() 时，三个参数必须是完整可计算的长度值，不能是纯数字加单位拼接的结果。以下写法会静默失败：
/* ❌ 错误：--fs-ratio 是纯数字，calc() 在旧 Safari 中不支持变量内嵌计算 */
:root {
--fs-ratio: 2.5;
font-size: clamp(1rem, calc(var(--fs-ratio) * 1vw), 1.5rem);
}
正确做法是让变量本身带单位：
/* ✅ 正确：每个变量都是完整值 */
:root {
--fs-h1: 1.875rem;
--fs-h2: 1.5rem;
--fs-body: 1rem;
}
h1 { font-size: clamp(var(--fs-h1), 2.5vw, 2.25rem); }
-
--fs-h1必须定义为1.875rem，不能是1.875 - 如果要用系数复用（比如深色模式微调比例），建议在构建时用 SCSS 生成带单位的变量，而非运行时靠
calc()拼接 - 所有使用处必须写
var(--fs-h1)，漏掉var()就等于没用变量
媒体查询重设变量必须作用于 :root
变量不是“活”的，它不会自动响应屏幕变化；真正触发更新的是媒体查询匹配后对 :root 的重写动作。常见错误是把变量写在普通选择器里：
/* ❌ 无效：这个 --fs-base 只在 .desktop 下生效，其他组件读不到 */
@media (min-width: 1024px) {
.desktop { --fs-base: 1.125rem; }
}
正确写法必须锁定 :root：
/* ✅ 有效：全局可继承 */
@media (min-width: 1024px) {
:root { --fs-base: 1.125rem; }
}
- 所有断点重设都得显式写
:root { --xxx: ... } - 别指望媒体查询“自动升级”已有变量——它只是覆盖声明，没声明就不存在
- JS 动态修改时也得走
document.documentElement.style.setProperty('--fs-base', '1.25rem')，单位不能省
JS 修改变量后，clamp() 为何没反应？
关键在于 clamp() 是否包含至少一个 rem 或 em 单位项。如果写成 clamp(16px, 4vw, 24px)，哪怕你改了 --fs-base，它也完全无视根字体变化。
- ✅ 有效写法：
font-size: clamp(0.875rem, 4vw, 1.5rem)——rem项会随根字号缩放 - ❌ 无效写法：
font-size: clamp(14px, 4vw, 24px)—— 所有参数都是绝对单位，JS 修改变量毫无影响 - 第三方 UI 组件若内部用
px或未透传font-size，需额外用!important或 CSS 自定义属性钩子覆盖
最易被忽略的一点：系统字体偏好（如 macOS 的“更大字体”或 Windows 的缩放设置）只影响 rem 和 em，不影响 px 或无单位 line-height。所以用 rem 作上下限，不只是为了 JS 控制，更是为了尊重用户真实可访问性设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
