clamp()不能直接替代媒体查询，其三值为min、preferred、max，需用绝对单位设上下限，中间值宜用vmin或vw+rem微调，并须真机测试避免小屏失效。
clamp() 能直接替代大部分字体响应式媒体查询，但必须理解它的三值逻辑和视口单位陷阱，否则容易在小屏或大屏上失控。
clamp() 的三个参数到底怎么算
它不是“最小值～最大值之间弹性缩放”，而是 clamp(最小值, 优选值, 最大值) —— 浏览器会先计算中间值，再把它卡进上下限里。比如 font-size: clamp(1rem, 2.5vw, 1.5rem)，实际行为是：先算出 2.5vw 对应的像素值，再和 1rem（≈16px）、1.5rem（≈24px）比大小，取中间那个。
- 中间值推荐用
vw，但别盲目套公式；先测几个关键断点（如 320px、768px、1200px）下你想要的字号，反推合适的vw系数 -
min和max必须是绝对单位（rem、px）或相对单位（em），不能是vw，否则会失效 - 如果中间值恒小于最小值（例如小屏下
2vw在 320px 时仅 6.4px），那最终永远取最小值——这不叫“流体”，只是 fallback
为什么字体在手机上没变小，甚至糊了
常见于直接抄网上示例：clamp(1.25rem, 4vw, 2.5rem)。问题出在 4vw：在 iPhone SE（375px）上是 15px，已低于 1.25rem（20px），结果字体被锁死在 20px，失去响应性；更糟的是，某些安卓浏览器对小 vw 值渲染精度差，导致文字边缘发虚。
- 优先用
vmin替代vw，尤其做全屏标题时，能避免窄高屏（如折叠屏竖屏）下字号突兀偏大 - 对正文文本，建议把中间值设得更保守，例如
clamp(1rem, 1.5vw + 0.5rem, 1.25rem)，用加法微调基线，比纯vw更可控 - 务必在真机或 Chrome DevTools 的 device mode 下测试，模拟器可能掩盖
vw渲染抖动
与媒体查询共存时的优先级和维护成本
clamp() 不是媒体查询的“升级版”，而是不同抽象层级的工具：媒体查询控制布局结构切换，clamp() 控制单一属性的连续过渡。混用时，CSS 层叠规则照常生效——后声明的 font-size 会覆盖前面的，无论来自 clamp() 还是 @media。
立即学习“前端免费学习笔记（深入）”；
- 不要在同一个选择器里又写
@media又写clamp()去“双重保险”，这只会增加调试难度 - 适合用 clamp() 的场景：标题、卡片标题、按钮文字等需要平滑缩放的单一样式；仍需媒体查询的场景：正文段落换行策略、多列布局切单列、图标尺寸阶跃变化
- 如果设计系统要求精确匹配 Figma 中的 3 个断点字号，不如老实用媒体查询——clamp() 的连续性反而成了约束
真正省事的不是函数本身，而是你愿意花 10 分钟在不同设备宽度下拖动浏览器调整 vw 系数，而不是复制粘贴一个看似通用却在 390px 宽度下崩掉的值。
