clamp() 三参数须单位一致或可换算，否则整条声明失效；旧版 Safari 存在解析 bug；line-height 应用无单位值或同步 clamp()；auto 等非长度值不可直接用于 clamp()。
clamp() 三个参数必须单位一致，否则整条声明失效
浏览器解析 clamp() 时，会严格校验三者单位是否可比。常见错误是写成 font-size: clamp(1rem, 2vw, 24px) —— rem 和 px 混用，vw 单独存在，三者不可直接比较，结果是整条 font-size 被忽略，回退到继承值或浏览器默认值。
正确做法是统一用 rem 或统一用 px，或者混用可换算单位（如 vw 和 rem 可共存，因两者都属长度单位且浏览器能动态计算）：
-
font-size: clamp(1rem, 1.2rem + 2vw, 2.5rem)✅ -
width: clamp(300px, 70%, 800px)✅（%是相对于父容器的长度，与px不冲突） -
padding: clamp(0.5rem, 3vw, 2rem)✅
注意：em 在嵌套上下文中会级联放大，和 vw 或 rem 混用易导致失控，不建议出现在 preferred 中。
旧版 Safari（iOS 13.3 及更早）会静默丢弃 clamp() 声明
Safari 13.1 开始支持 clamp()，但 iOS 13.0–13.3 的 WebKit 存在解析 bug：只要 clamp() 出现在 @media 块内，或包裹了 CSS 变量（如 clamp(var(--min), var(--pref), var(--max))），整条规则就会被跳过，无任何报错提示。
立即学习“前端免费学习笔记（深入）”；
实操建议：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 降级写法必须前置：先写固定值，再覆盖
clamp()，例如font-size: 1.5rem; font-size: clamp(1rem, 1.5rem + 0.5vw, 2.25rem); - 避免在
@media内重复声明clamp()，所有响应逻辑应放在根级规则中 - CSS-in-JS 场景下，禁用变量插值，直接拼接数值字符串，防止构建时转义出错
line-height 不能靠 font-size 缩放自动适配
clamp() 只控制 font-size，而 line-height 若写死为 1.6（无单位）看似安全，实际在小屏下字体缩到 1rem 时，行高仍按 1.6×1rem 计算；大屏下字体涨到 2.5rem，行高变成 1.6×2.5rem —— 视觉节奏完全失衡。
真正可控的方式只有两种：
- 坚持用无单位值（如
line-height: 1.4），它会随font-size等比缩放，这是最轻量、最推荐的做法 - 若需像素级对齐（比如图标+文字垂直居中），必须同步用
clamp()控制：line-height: clamp(1.2rem, 1.4rem, 1.6rem) - 绝对禁止写
line-height: 24px或line-height: normal，前者无法响应，后者由字体族决定，不可控
auto / min-content / max-content 不能直接塞进 clamp()
写 width: clamp(200px, auto, 400px) 是无效的。auto 不是可计算长度，浏览器无法将其参与比较运算，整条声明作废。
当前唯一解法是配合新函数 calc-size()：
-
width: calc-size(auto, clamp(200px, size, 400px));✅ -
width: calc-size(max-content, clamp(size, 80%, 600px));✅
注意：calc-size() 目前仅 Chromium 120+ 和 Safari 17.4+ 支持，Firefox 尚未实现。生产环境使用前必须加特性检测或 JS 回退。
真正麻烦的不是语法，而是单位归一化和 Safari 解析边界——这两点踩错，clamp() 就只是个看起来很美的装饰性函数。
