clamp() 不支持直接使用 var()，必须用 calc() 包裹变量，如 clamp(calc(var(--min-size)), 3.2vw, calc(var(--max-size)))，否则会失效。
直接用 clamp() 配合 CSS 自定义属性（--var）是可行的，但必须绕开一个关键限制：自定义属性不能直接参与 clamp() 的计算，除非你把它放进 calc() 里中转。
为什么 --size-min: 1rem; font-size: clamp(var(--size-min), 4vw, 2rem) 会失效？
因为 var(--size-min) 在 clamp() 内部不会被解析为可计算值——浏览器把整个 clamp() 当作一个原子函数处理，不支持变量插值。它会直接报错或静默回退到初始值（比如忽略整条声明）。
- 错误现象：
font-size不生效，控制台可能无提示，但 DevTools 显示该样式被划掉（invalid） - 根本原因：
clamp()是 CSS 函数，不是预处理器；它只接受字面量、calc()表达式或已知单位值，不接受未解析的var() - 兼容性陷阱：即使在 Chrome 120+ 或 Safari 17+ 中，这种写法也无效，不是版本问题，而是规范限制
正确写法：用 calc() 包一层，再传给 clamp()
必须把 var() 放进 calc()，再让 calc() 作为 clamp() 的参数。这样浏览器才能先求出变量值，再执行范围判断。
- ✅ 正确示例：
font-size: clamp(calc(var(--min-size)), 3.2vw, calc(var(--max-size))); - ⚠️ 注意单位一致性：如果
--min-size是1.125rem，那--max-size也得是rem或同单位px，否则clamp()可能拒绝解析 - ? 小技巧：可以给变量设默认值，比如
var(--min-size, 1rem)，避免未定义时崩溃
如何批量控制多个元素的缩放曲线？
靠一套变量 + 一个 clamp() 模板，就能统一管理标题、正文、间距等不同层级的响应逻辑，而不用重复写断点。
- 在
:root定义：--h1-min: 1.5rem; --h1-max: 3rem; --h1-vw: 4.2; - 然后用：
h1 { font-size: clamp(calc(var(--h1-min)), calc(var(--h1-vw) * 1vw), calc(var(--h1-max))); } - 关键点：
calc(var(--h1-vw) * 1vw)把数字变量（如4.2）和单位（vw）安全拼接，比直接写var(--h1-vw)vw更可靠 - 性能影响：无额外运行时开销，所有计算仍在 CSS 引擎内完成，和纯字面量
clamp()性能一致
容易被忽略的 fallback 和调试细节
自定义属性 + clamp() 组合后，降级逻辑变得更隐蔽——旧浏览器不仅不认 clamp()，还可能完全忽略 var()，导致整条规则失效。
- 必须前置静态声明：
font-size: 1.5rem; font-size: clamp(...);，否则 IE 或 Android 4.4 WebView 会用默认 16px - 调试建议：在 DevTools 中临时把
var(--min-size)替换成实际值（如1.5rem），确认clamp()本身是否工作正常 - 别在变量里塞表达式：
--min-size: calc(1rem + 2px)是合法的，但放进clamp(calc(var(--min-size)), ...)后，某些安卓 WebView 会双重解析失败
真正“巧妙”的地方不在语法炫技，而在于用变量把设计系统里的缩放系数（比如“标题缩放斜率”“正文最小字号”）从硬编码中解耦出来；但每一步都得踩在 CSS 运行时解析的实际路径上，跳过 calc() 这一环，就全盘落空。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
