clamp()是CSS函数而非HTML5或JavaScript的，用于流体字号控制，需现代浏览器支持，参数为min、preferred、max，单位需统一，fallback需用@supports检测，失效常因容器宽度、优先级或!important导致。
HTML5里没有clamp()函数？那是CSS的
很多人搜“HTML5 clamp函数”，实际是混淆了语言边界——clamp() 是 CSS 函数，不是 HTML 或 JavaScript 的。HTML5 本身不提供任何字体计算能力，所有流体字号逻辑都得靠 CSS 实现，且必须依赖现代浏览器支持（Chrome 78+、Firefox 75+、Safari 13.1+）。老版本 Safari 尤其容易踩坑，clamp(1rem, 2.5vw, 1.5rem) 在 Safari 12 及更早会直接忽略整条声明。
clamp()三个参数的真实含义和常见错配
clamp() 写成 clamp(min, preferred, max)，但很多人把 preferred 当成“基准值”，其实它是“理想视口下的目标值”，浏览器会优先尝试让它生效，再根据视口缩放去夹逼。关键点在于单位混用：
-
min和max必须可比较（比如都是rem或都是vw），否则行为不可控 -
preferred推荐用响应式单位（如2.5vw），但不能写成2.5em——em会继承父级字体大小，破坏流体逻辑 - 别在
min里写12px、max里写2rem：像素和相对单位混合时，不同设备 DPI 下夹逼结果会偏移
替代方案：当 clamp() 不可用时怎么保底
纯 CSS fallback 要靠媒体查询 + 自定义属性降级，不能只靠 font-size: 1.2rem 写在前面——CSS 会覆盖，不是回退。正确做法是：
- 先声明基础字号：
font-size: 1.2rem - 再用
@supports (font-size: clamp(1rem, 1vw, 1rem))包裹流体规则，里面覆盖字体大小 - 如果要用 JS 动态计算，别手动监听
resize——开销大还抖动，改用ResizeObserver监听根元素，再更新document.documentElement.style.setProperty('--fluid-size', value)
为什么clamp()有时“不动”？检查这三点
写了 font-size: clamp(1rem, 4vw, 2rem) 却没变化，大概率卡在这几个地方：
立即学习“前端免费学习笔记（深入）”；
- 父容器宽度没限制（比如
div没设width或max-width），导致vw始终按整个视口算，而你预期的是内容区宽度 - CSS 优先级被更高权重的规则覆盖（比如某个
.title strong选择器强制设了1.5rem） - 用了
!important在旧规则里，而clamp()声明没加，导致被无视
流体排版真正难的不是公式，是搞清「谁在变」——是视口宽？容器宽？还是字体继承链里的某个中间节点。漏掉这一层，clamp() 就只是个好看但没用的装饰函数。
