CSS变量是响应式字体系统的核心，必须带单位定义在:root中，通过媒体查询重置、JS动态修改时需确保单位正确且全局引用var()，否则缩放链断裂。
直接用 clamp() 写死值（比如 clamp(1rem, 2.5vw, 1.5rem)）能响应视口，但一旦要统一调整缩放比例、切深色模式微调字号，或适配系统字体偏好，就得全局搜替换——改漏一个，样式就断层。CSS 变量不是锦上添花，而是把「变化点」从 CSS 声明里抽出来，变成可继承、可条件覆盖、可 JS 动态注入的配置项。
为什么 clamp() 里引用变量必须带单位
clamp() 的三个参数（最小值、首选值、最大值）都必须是浏览器能直接解析的长度值，不能是纯数字加单位拼接的结果。浏览器不支持 clamp(var(--min), calc(var(--ratio) * 1vw), var(--max)) 这类嵌套计算，calc() 中引用的变量本身就得是完整值（如 1.125rem），否则解析失败，整个 font-size 会退回到浏览器默认值（通常是 16px）。
-
--fs-h1: 1.875rem✅ 正确：变量值自带单位，clamp(var(--fs-h1), ...)可直接用 -
--fs-ratio: 2.5❌ 错误：单独变量存数字，calc(var(--fs-ratio) * 1vw)在部分旧版 Safari 中静默失效 - 若需系数复用，建议在 SCSS 编译期生成带单位的值，而非靠运行时
calc()拼接
如何在 :root 中定义并被媒体查询批量重置
变量必须定义在 :root 下才能被所有元素继承；媒体查询中重设变量也必须写在 :root 选择器内，否则无效。变量本身不“监听”屏幕变化，它只是静态声明 —— 真正触发更新的是媒体查询匹配后对 :root 的重写动作。
- 初始值写在
:root顶层：:root { --font-size-base: 1rem; } - 断点重设必须显式写
:root：@media (min-width: 768px) { :root { --font-size-base: 1.125rem; } } - 别在媒体查询里写
.title { --font-size-base: ... }—— 这个变量只对该选择器生效，无法被其他组件读取 - 所有实际使用处必须显式引用：
.title { font-size: var(--font-size-base); }，漏掉var()就等于没用变量
JS 动态修改变量时容易踩的坑
用 JS 修改 --font-size-base 是实现“大字模式”或用户偏好同步的关键，但几个细节错一点，整个缩放链就断了。
立即学习“前端免费学习笔记（深入）”；
- 必须用
document.documentElement.style.setProperty('--font-size-base', '1.25rem')，不能漏单位（'1.25'无效） - 避免在媒体查询中硬写
font-size: 18px—— 它会覆盖 JS 设置的变量值，导致切换失效 -
clamp()要参与 JS 缩放，至少有一项得是rem单位，例如clamp(0.875rem, 4vw, 1.25rem)；写成clamp(14px, 4vw, 24px)则完全无视根字体变化 - 第三方 UI 组件若内部用
em或px写字体，不会随变量变化，需检查其是否支持font-size属性透传，或用!important覆盖（慎用）
真正难的不是写对一行 clamp()，而是让所有字号、行高、字间距、图标大小都基于同一套变量演算，并在媒体查询、JS 控制、用户系统设置三者之间保持行为一致。多数项目崩在“某处忘了用 var()”，或者“某组件用了 em 却没意识到它不继承根字号”。
