clamp()配var(--x)可统一调控字号体系，但变量须在clamp()内解析且min/max必须带合法单位，否则整条声明被静默丢弃；需注意浏览器兼容性、作用域、计算上下文及vw/cqw适用场景。
直接说结论：用clamp()配var(--x)能统一调控字号体系，但变量必须在clamp()内部被解析，且min和max不能是纯数字或单位混用——否则整条声明会被浏览器静默丢弃。
为什么font-size: clamp(var(--min), var(--pref), var(--max))有时不生效
这不是语法错误，而是浏览器解析限制：Safari ≤ 13.1、部分安卓 WebView 会直接跳过含var()的clamp()声明；更隐蔽的是，如果--min或--max定义为16（缺单位）或1rem + 2px（单位混用），现代浏览器也会忽略整条font-size规则。
- 确保所有变量值带合法长度单位：
--min: 1rem✔️，--min: 16❌ - 避免在
:root外定义关键变量——组件级var(--fs-h1-min)在嵌套时可能无法被父选择器读取 - 不要把整个
clamp()赋给一个变量，比如--title-size: clamp(1rem, 2vw, 2rem)，这样写font-size: var(--title-size)不会重算
怎么声明和更新变量才让clamp()真正响应
变量要“活”，就得让它参与运行时计算。核心是两点：作用域可控、更新路径明确。
- 全局字号基准建议抽成
--base-font-size: 16，再用calc(1rem * var(--base-font-size) / 16)归一化，避免第三方 JS 直接改document.documentElement.style.fontSize导致所有rem偏移 - 夜间模式切换字号时，用
document.documentElement.style.setProperty('--fs-h1-pref', 'calc(1.2rem + 0.4vw)')，不是改font-size本身 - 若需兼容 iOS 13.0–13.3，放弃
var()组合写法，降级为静态clamp(1rem, calc(1.1rem + 0.5vw), 1.75rem)+ 前置font-size: 1.25rem
clamp()里用calc()包裹变量表达式的关键细节
首选值（第二个参数）必须是可变的，而var(--pref)本身不能含calc()——CSS 不允许嵌套函数。所以得把calc()写在变量值里，或在外层显式包裹。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
--pref: calc(1.1rem + 0.5vw)，然后clamp(var(--min), var(--pref), var(--max)) - 禁止写法：
--pref: "1.1rem + 0.5vw"（字符串无效）或clamp(var(--min), calc(var(--pref)), var(--max))（calc()内不能调var()） - 系数要经锚点验证：比如希望 375px → 18px、1440px → 28px，则斜率 ≈ 0.0089，截距 ≈ 14.7，最终写成
--pref: calc(14.7px + 0.89vw)，而不是凭感觉填1vw
容易被忽略的布局上下文干扰
vw永远按视口宽度算，和元素实际渲染宽度无关。当clamp()用在窄容器（如侧边栏、卡片标题）里，字体可能大得离谱。
- 检查父容器是否设了
max-width、overflow: hidden或transform——这些会切断vw的计算上下文 - 窄区域优先改用
rem+ 媒体查询兜底，或升级到cqw（容器宽度单位），但需确认浏览器支持：@container (width > 300px) { h3 { font-size: clamp(1.125rem, 2.2cqw, 1.5rem); } } - Flex/Grid 子项中
vw失效？加flex-shrink: 0或min-width: 0释放宽度约束，再测
真正麻烦的从来不是写对clamp()，而是它依赖的整个链条：根字号是否被覆盖、父容器是否截断视口单位、旧浏览器是否连var()都解析不了——每个环节断掉，字体就卡死在某个值上，还查不出错在哪。
