clamp() 的 fallback 必须写在前面，旧版 Safari、IE 和微信 X5 内核会忽略 clamp() 且不报错；正确顺序是先写 font-size: 1.5rem，再写 clamp()；不可用 @supports 包裹，避免白屏。
font-size: clamp() 的 fallback 必须写在前面
旧版 Safari（iOS 13.0 及更早）、IE 全系、部分微信 X5 内核会直接忽略 clamp() 声明，且不报错。如果你把 font-size: clamp(1rem, 1.25rem + 0.3vw, 2.25rem); 写在 font-size: 1.5rem; 前面，老浏览器就读不到基础字号，结果是文字极小甚至不可见。
正确顺序只能是：
h1 {
font-size: 1.5rem; /* 先声明 fallback */
font-size: clamp(1rem, 1.25rem + 0.3vw, 2.25rem);
}别用 @supports (font-size: clamp()) 包裹——iOS 13.0 的 Safari 能识别 @supports 但不支持 clamp()，导致 fallback 被跳过，白屏风险真实存在。
Flexbox 容器里用 clamp() 排版时，别让 flex-shrink 拦住字号缩放
Flex 项默认有 min-width: auto，它会阻止子元素收缩，哪怕你写了 font-size: clamp(1rem, 0.8rem + 0.4vw, 1.5rem)，字体也可能卡在中间值不动，尤其在窄屏下。
立即学习“前端免费学习笔记（深入）”；
解决办法很简单：
- 给 Flex 子项加
min-width: 0（或min-width: fit-content），释放收缩能力 - 避免对同一元素同时设
flex: 1和大min-width，比如min-width: 300px会直接压垮流体逻辑 - 如果子项含图片，记得加
img { max-width: 100%; height: auto; }，否则图片撑宽会间接锁死容器宽度，让vw失效
clamp() 第二个参数不是 calc()，也不能省单位
clamp() 的 preferred 值必须是合法长度，浏览器会严格校验。下面这些写法都会失效：
-
clamp(1rem, calc(1.25rem + 0.3vw), 2.25rem)——calc()嵌套不被允许 -
clamp(1rem, 1.25 + 0.3vw, 2.25rem)—— 缺少单位的数字无法参与计算 -
clamp(1rem, 1.25em + 0.3vh, 2.25rem)——vh在移动端滚动时视口高度抖动，会导致字号跳变
安全写法只有一种：用 rem 或 px 加 vw 线性组合，例如 1.125rem + 0.36vw。注意截距项必须用 px 或 rem，不能是 em（会随父级缩放二次放大）。
Flex + clamp 组合不适合控制行高或容器尺寸
line-height 不该套 clamp()：比如 line-height: clamp(1.2, 1.4vw, 1.6) 在小屏下 1.4vw 可能只有 5px，文字挤成一团。无单位值如 line-height: 1.4 才是正解——它会随 font-size 自然缩放。
同理，别用 clamp() 控制 width 或 height 配合 Flex：
- Flex 容器本身靠
flex-basis或width提供主轴尺寸，clamp()插入后容易和flex-shrink/grow冲突 - 若真要流体宽度，优先用 Grid 的
minmax(250px, 1fr)+auto-fit，语义更清晰，行为更可控
真正适合 Flex + clamp 的场景很窄：仅限于 Flex 项内部的文字层级（标题、副标、按钮文字），且父容器宽度稳定可测。一旦涉及尺寸传导或交叉轴约束，就该换思路了。
