真正生效需设置 :root { font-size: var(--font-base, 16px); }，css变量仅存储值；漏var()、作用域错误、缺单位、clamp()未用rem、js修改未操作document.documentelement或缺单位，均导致失效。
直接改 :root 的 font-size 才算真正生效
只写 :root { --font-base: 16px } 不会改变任何字体大小。CSS 变量只是存储值，不自动注入样式。真正起作用的是这行：:root { font-size: var(--font-base, 16px); }——它把变量“兑现”为根字号，所有 rem 才能响应变化。
常见错误包括：
- 漏掉
var()引用，比如写了--font-base: 18px却在h1里用font-size: 1.5rem，结果完全无视变量 - 把变量定义在非
:root作用域，如.header { --font-base: 18px; }，其他地方读不到 - 变量缺单位，
--font-base: 16（没px或rem），后续calc()或var()计算时静默失败，文字可能消失
clamp() 必须含 rem 才响应动态缩放
clamp(14px, 4vw, 18px) 完全不随 --font-base 变化，因为三项都是绝对或视口单位，和根字号无关。要让它参与动态缩放，至少有一项必须是 rem：
- ✅ 推荐：
clamp(0.875rem, 4vw, 1.25rem)—— 首尾用rem锚定基准，中间用vw提供弹性 - ⚠️ 危险：
clamp(0.875rem, 2rem, 1.125rem)—— 当根字号放大到24px，中间项变成48px，远超上下限，实际永远取上限，失去弹性 - ? 小屏下
4vw可能趋近于0，导致clamp()锁死最小值，建议加媒体查询兜底，别全靠它
JS 修改变量时三个关键动作不能少
用 document.documentElement.style.setProperty() 动态改字号，以下三点错一个就失效：
- 必须操作
document.documentElement，不是document.querySelector('html')—— 后者不保证访问到根样式表 - 变量值必须带单位：
setProperty('--font-base', '18px')，写成'18'会静默失败 - 别在媒体查询里硬写
html { font-size: 18px; }，它会覆盖 JS 设置；统一走:root变量 +var()路径
多级字号管理要用语义化变量名，别堆 calc()
为每个标题单独写 calc(var(--base) * 1.5) 是自找麻烦。正确做法是按语义定义完整值：
- ✅
--fs-h1-min: 1.25rem;、--fs-h1-vw: 4vw;、--fs-h1-max: 2.5rem;—— 全部带单位，直接可被clamp()引用 - ❌
--fs-base: 16;再配calc(var(--fs-base) * 0.875)—— 缺单位导致计算无效，且无法被clamp()直接消费 - 媒体查询中重设变量，必须作用于
:root，例如@media (max-width: 768px) { :root { --fs-h1-min: 1.125rem; } }，否则断点间不继承
最易忽略的点是：变量本身必须是「完整长度值」，不是「纯数字+单位拼接」。CSS 不会帮你补单位，也不会运行时解析字符串。写错单位或漏单位，浏览器不会报错，但效果归零——你得去 Computed 面板里看最终 font-size 值才能确认是否真生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
