clamp()是CSS中实现连续插值的响应式函数，语法为clamp(min, preferred, max)，本质是max(min, min(preferred, max))；它与媒体查询的本质区别在于：后者是离散断点触发的布局质变，前者是视口宽度驱动的平滑、无跳变的线性缩放。
什么是 clamp()，它和媒体查询有什么本质区别？
clamp() 不是替代媒体查询的“高级写法”，而是一种连续、无断点的插值机制。它接收三个参数：min、preferred、max，语法为 clamp(min, preferred, max)。浏览器会根据视口宽度在 min 和 max 之间线性计算当前值，只要 preferred 是一个相对单位（比如 vw），就能实现平滑缩放。
常见错误是把 preferred 写成固定值（如 clamp(16px, 20px, 32px)）——这等于直接取 20px，完全失去响应能力。
实际使用中要注意：min 和 max 必须是绝对单位（px、rem）或兼容单位（em），而 preferred 推荐用 vw，避免嵌套容器干扰；如果父容器宽度不稳定，vw 比 % 或 ch 更可靠。
怎么写出不踩坑的字体 clamp() 表达式？
直接套公式容易翻车。推荐用这个结构：clamp(1rem, 0.8rem + 1.2vw, 1.5rem)。其中：
立即学习“前端免费学习笔记（深入）”；
-
1rem是最小字号（小屏保底，防止过小） -
0.8rem + 1.2vw是核心响应项：用rem基底 +vw增量，兼顾可读性与伸缩性 -
1.5rem是最大字号（大屏上限，防过度放大）
为什么不用纯 vw（如 clamp(16px, 4vw, 32px)）？因为 4vw 在 375px 屏上约 15px，低于 16px，此时浏览器取 min；但到 1920px 屏就变成 76.8px，远超 max，触发截断。而混合单位能更精细控制起始斜率。
验证方法：打开浏览器开发者工具，在响应式模式下拖动宽度，观察 computed 样式里的实际像素值是否平滑变化——不是阶梯跳变，就说明生效了。
clamp() 在真实项目里要配合哪些设置才不炸？
单独加 font-size: clamp(...) 往往不够。常见连锁问题包括行高断裂、字重模糊、按钮尺寸错位。必须同步处理：
- 给文字容器设
line-height: 1.4或line-height: clamp(1.2, 1.3 + 0.1vw, 1.6)，否则字号缩放后行距不跟上 - 避免对同一元素同时用
clamp()和transform: scale()，会导致渲染层级异常和点击热区偏移 - 若用在按钮内文字上，记得给按钮本身也加
min-height: clamp(32px, 2rem + 0.5vw, 48px)，否则文字撑大但按钮高度不变，视觉割裂 - 旧版 Safari（iOS 13.3 及更早）不支持
clamp()，需加降级：font-size: 1.2rem; font-size: clamp(1rem, 0.8rem + 1.2vw, 1.5rem);
什么时候不该用 clamp() 控制字体？
不是所有文字都适合动态缩放。以下场景建议放弃 clamp()，改用传统断点：
- 品牌 slogan 或 logo 文字：需要严格保持比例和视觉重量，连续缩放会破坏设计意图
- 表格内数字列：字号微调会导致对齐抖动，尤其配合
text-align: right时 - 超小屏（vw 精度误差明显，
clamp(12px, 3.2vw, 14px)在 320px 屏算出来是 10.24px，被浏览器向下取整为 10px，反而比设定的min还小 - 使用自定义字体且未设置
font-display: swap：clamp()缩放可能在字体加载完成前触发重排，造成闪动
真正关键的是理解：它解决的是“中间区间”的平滑过渡，而不是全场景万能方案。小屏靠 min 守住底线，大屏靠 max 设定上限，中间那段才是 clamp() 发挥作用的地方——别指望它包打天下。
