clamp() 是原生 CSS 函数，非 JS 函数或预处理器指令，语法为 clamp(min, preferred, max)，按“取中间值”逻辑计算且纯 CSS 运行时求值。
clamp() 是什么，不是什么
它不是 JS 函数，也不是 CSS 预处理器指令，而是原生 CSS 函数，语法为 clamp(min, preferred, max)。浏览器按“取中间值”逻辑计算：结果不会小于 min，也不会大于 max，在两者之间则尽可能贴近 preferred。关键点在于——它只做数值比较，不触发重排或 JS 计算，纯 CSS 运行时求值。
怎么写才不会被浏览器忽略
常见失效原因不是语法错，而是单位混用或类型冲突：
-
min、preferred、max必须是同一类可比单位：全用rem、全用vw、或全用带 calc 的混合（如calc(1rem + 1vw)），但不能16px和2em混写 - 不能把字符串、颜色、关键字（如
auto）塞进任意参数位，clamp(0, auto, 100%)直接被整条声明丢弃 - 某些旧版 Safari（≤13.1）不支持
clamp()用于font-size以外的属性，比如用在padding上会静默失效
示例（安全写法）：font-size: clamp(1rem, 4vw, 1.5rem);
响应式字号过渡卡顿？其实是 viewport 变化粒度问题
不是 clamp() 本身不平滑，而是浏览器对 vw 的采样频率受限于 viewport 尺寸变化的触发时机。缩放窗口时，尺寸可能跳变几个像素，导致字号突变。解决思路不是换函数，而是控制变化节奏：
立即学习“前端免费学习笔记（深入）”；
- 用
vw但避开临界点：比如不用clamp(1rem, 3.2vw, 1.4rem)，改用clamp(1rem, calc(1rem + 1.2vw), 1.4rem)，让基准随根字号浮动，减少绝对 vw 的跳跃感 - 搭配
transition仅对支持的属性生效：目前只有font-size等少数属性能被平滑过渡，margin或width即使写了transition: all也无效 - 别依赖
clamp()做精细断点控制：它适合连续过渡，真要三档分明（手机/平板/桌面），还是老实用@media
兼容性兜底必须手动写，CSS @supports 不够用
@supports (font-size: clamp(1rem, 1.2rem, 1.4rem)) 在部分安卓 WebView 里返回 true，但实际不执行，属于“假支持”。更可靠的方式是：
- 先写降级值：
font-size: 1.2rem; - 再覆盖：
font-size: clamp(1rem, 4vw, 1.5rem); - 不依赖 JS 检测：现代打包工具（如 PostCSS）可插件自动补 fallback，但需确认是否处理了 calc 嵌套场景
真正容易被忽略的是：当父容器用了 transform: scale() 时，vw 仍按视口原始尺寸计算，和视觉大小脱节——这时候 clamp() 的“响应”就完全不对劲了。
