clamp(min, preferred, max)中，min为最小值（保底线可读性），preferred为视口依赖的基准插值点（如rem+vw混合式表达式），max为最大值（防大屏溢出），三者单位需协调且max≥min，否则行为未定义。
clamp() 的三个参数分别控制什么
clamp(min, preferred, max) 不是简单的“取中间值”，而是浏览器根据视口宽度动态插值：当视口很小时，结果等于 min；很大时等于 max；中间区间线性过渡，用的是 preferred 作为基准点（不是固定值）。关键在于第三参数必须 ≥ 第一参数，否则行为未定义——部分浏览器会静默降级为 max，但 Chrome 119+ 已开始抛出 CSS 解析警告。
font-size 流体缩放的典型写法
直接写 clamp(1rem, 2.5vw, 1.5rem) 看似简洁，但实际效果常不理想：2.5vw 在小屏（如 320px）只有 ~8px，大屏（1920px）达 ~48px，跨度太大。更稳妥的做法是锚定一个参考宽度（比如 1200px），让字号在该宽度下正好等于目标值：
font-size: clamp(1rem, 0.75rem + 0.5vw, 1.5rem);
这个表达式等价于：在 320px 宽度下约 1rem（16px），在 1200px 下正好 1.5rem（24px），超过后锁定 1.5rem。计算逻辑是：0.75rem + 0.5vw 中的 0.75rem 补偿了 vw 在小屏的过度衰减。
- 避免纯 vw（如
clamp(1rem, 2vw, 1.5rem)），它在超小屏易过小 - 推荐用
rem+vw混合，兼顾可读性与响应性 - 移动端 Safari 对
clamp()中嵌套 calc() 支持不稳定，慎用clamp(1rem, calc(1rem + 1vw), 1.5rem)
line-height 和其他属性也能用 clamp 吗
能，但要小心单位混用和继承干扰。比如 line-height: clamp(1.2, 1.1 + 0.02vw, 1.5) 是可行的（无单位数值可直接参与计算），而 padding: clamp(0.5rem, 2vw, 1rem) 也常见。但注意：
-
line-height若设为带单位的值（如clamp(16px, 2vh, 24px)），可能破坏行高继承逻辑，尤其在嵌套文本中 - Flex 或 Grid 容器的
gap、margin用clamp()时，需确认父容器 width 是否稳定——若父容器本身流体，嵌套 clamp 可能导致意外抖动 - 不要对
font-weight或color使用clamp()，它们不接受数值插值
兼容性和 fallback 怎么处理
Chrome 76+/Firefox 75+/Safari 13.1+ 原生支持，但 iOS 13.3 之前的 Safari 有渲染闪烁 bug。真正要命的是旧版 Edge（≤18）和 IE —— 它们完全忽略含 clamp() 的整条声明。所以必须提供 fallback：
font-size: 1.25rem;<br>font-size: clamp(1rem, 0.75rem + 0.5vw, 1.5rem);
注意顺序：fallback 写在前，clamp() 写在后。CSS 解析器会忽略不认识的函数，保留上一行生效。别用 @supports (font-size: clamp(...)) 包裹——这在 Safari 13.1 上反而会误判为不支持。
复杂点在于：当字号用 clamp()，而行高仍用固定值时，小屏可能出现行距过紧。最易被忽略的是 root font-size 变化——如果项目用了 html { font-size: clamp(16px, 1vw, 20px); }，那所有 rem 单位都会二次放大，此时子元素的 clamp() 必须重新校准基准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
