clamp()函数三参数为min、preferred、max，逻辑是“优先取preferred，但不超min/max边界”，即max(min, min(preferred, max))；需至少一个参数用vw/rem等相对单位才具响应性。
clamp() 函数的三个参数到底怎么填
clamp() 的语法是 clamp(min, preferred, max)，它不是简单取中间值，而是「在 min 和 max 之间，优先使用 preferred，但绝不超出边界」。实际计算逻辑是：max(min, min(preferred, max))。常见误写是把 preferred 写成固定像素值（比如 clamp(16px, 20px, 24px)），这样根本没响应性——它只是个静态三值比较。
真正自适应的关键在于：至少有一个参数得是相对单位或视口单位。典型写法是：
font-size: clamp(1rem, 2.5vw, 1.5rem);
这表示：字号最小为 1rem（约 16px），最大不超过 1.5rem（约 24px），在中间区间随视口宽度线性变化（2.5vw）。
为什么用 vw 单位配合 clamp() 容易导致小屏文字过小
直接写 clamp(16px, 4vw, 24px) 看似简洁，但在 iPhone SE（375px 宽）上，4vw = 15px，已低于你设的 16px 下限——此时 clamp() 会生效下限，显示为 16px；但若下限设成 14px，而用户系统字体缩放开启 +120%，实际渲染可能糊掉或挤出换行。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
rem或em作上下限，确保尊重用户默认字号偏好和系统缩放设置 -
preferred段建议用vw，但系数需实测：从2vw起步，在 320px–1200px 视口间预览是否自然 - 避免在
preferred中混用vh或vmin，除非明确需要垂直方向响应（如全屏标题），否则易在横屏移动设备上失衡
与媒体查询相比，clamp() 的真实优势在哪
它不是媒体查询的替代品，而是补足其“阶梯式断点”带来的生硬感。比如用媒体查询做三档字号：
@media (max-width: 480px) { font-size: 1rem; }<br>@media (min-width: 481px) and (max-width: 768px) { font-size: 1.125rem; }<br>@media (min-width: 769px) { font-size: 1.25rem; }
这种写法在 480px 和 481px 交界处会突变。而 clamp(1rem, 2.2vw, 1.25rem) 是连续过渡，且 CSS 引擎原生支持，无需 JS、无重排开销。
但注意：clamp() 无法替代复杂逻辑判断。例如「当屏幕高度小于 500px 时禁用某段动画」，仍需媒体查询或 JS。
兼容性与降级方案怎么写才不翻车
目前 clamp() 在 Chrome 78+、Firefox 75+、Safari 13.1+ 均支持，但 IE 完全不支持，旧版 Safari（≤13.0.4）仅部分支持。关键不是加前缀，而是提供安全 fallback：
font-size: 1.125rem;<br>font-size: clamp(1rem, 2.2vw, 1.25rem);
这里第二行会覆盖第一行（现代浏览器），旧浏览器直接忽略第二行，退回到 1.125rem 静态值。切忌反着写，也别用 @supports 套一层再声明——多数场景没必要，反而增加解析负担。
真正容易被忽略的是：如果父容器用了 transform: scale() 或设置了 zoom，vw 值仍按视口原始尺寸计算，不会跟随缩放变化。这种边缘情况，得靠 JS 动态计算补救，clamp() 本身无解。
