clamp(MIN, PREFERRED, MAX) 是取三者中最合适值的函数：MIN防过小，PREFERRED为弹性基准（须用vw等可计算单位），MAX防过大；PREFERRED需覆盖小屏区间，常配合calc或媒体查询修正，且优先级低于同级媒体查询规则。
clamp() 基本语法和三个参数的实际含义
clamp() 不是魔法，它只是取一个范围内的“安全值”：最小值、首选值、最大值。浏览器会根据当前计算上下文（比如视口宽度），在三者中选一个最合适的 font-size 值，而不是线性插值——这点常被误解。
写法是 clamp(MIN, PREFERRED, MAX)，例如：clamp(1.25rem, 4vw, 2.5rem)。其中：
-
MIN（如1.25rem）：屏幕再小也别缩过这个大小，防文字不可读 -
PREFERRED（如4vw）：这是“弹性基准”，通常用vw单位，随视口宽度线性变化 -
MAX（如2.5rem）：再大也不许超过，避免大屏上标题撑爆布局
注意：PREFERRED 必须是可计算的长度单位（vw、vh、em、px 等），不能是百分比或无单位数字；MIN 和 MAX 推荐用相对单位（rem 或 em），便于配合根字体缩放。
为什么直接写 clamp(1.5rem, 6vw, 3rem) 在手机上可能还是太小
问题出在 vw 的起点太“激进”：iPhone SE（375px 宽）下 6vw = 22.5px ≈ 1.4rem，如果 MIN 设的是 1.5rem，那实际生效的就是 MIN，但用户感觉“没动”，其实是 clamp 被迫锁死在下限——这说明你设的 PREFERRED 没覆盖到小屏区间。
立即学习“前端免费学习笔记（深入）”；
更稳妥的做法是把 PREFERRED 调低一点，并让 MIN 和 PREFERRED 在常见小屏宽度下自然衔接。常用技巧：
- 先算目标小屏宽度（如 320px）下期望的字号，比如 20px → 对应
6.25vw（因为 20 ÷ 320 × 100 = 6.25），但这样在更小屏又会掉下去 - 改用带偏移的计算：用
calc(1rem + 2.5vw)替代纯vw，让基础值兜底 - 或者直接换思路：用媒体查询 fallback，
clamp()本身不解决所有响应断点，它只负责平滑过渡段
与 media query 混用时的优先级和常见冲突
clamp() 是 CSS 值计算层的行为，而媒体查询是规则匹配层，二者不互斥，但容易因书写顺序或 specificity 出现意料外覆盖。典型翻车场景：
- 你在
@media (max-width: 480px) { h1 { font-size: 1.375rem; } }里写了固定字号，但它会完全覆盖h1 { font-size: clamp(...); }—— 因为媒体查询规则后加载且 specificity 相同 - 想“仅在中屏启用 clamp”，却忘了移除其他断点里的
font-size声明，导致 clamp 被静默忽略
正确做法是：把 clamp() 当作默认值写在常规选择器里，媒体查询只用于修正极端情况（比如超小屏强制固定值，或超大屏加粗/字重调整）。示例：
h1 {
font-size: clamp(1.375rem, 4.2vw, 2.5rem);
}
@media (max-width: 360px) {
h1 {
font-size: 1.375rem; /* 覆盖 clamp 下限，避免 vw 计算过小 */
}
}字体渲染差异导致的视觉“卡顿”或跳变
不是所有浏览器对 clamp() 中 vw 的重算频率一致。Safari（尤其 iOS 15–16）在横竖屏切换或键盘弹出时，可能延迟更新 font-size，造成短暂错位；Chrome 则更激进，在滚动时也可能触发重排。
缓解方式有限但有效：
- 避免在
clamp()里混用vh或vmin，它们受滚动/键盘影响更大 - 给标题加
will-change: font-size（慎用，仅当复现明显跳变时） - 测试真实设备：模拟器里的
vw行为和真机有差异，特别是 Safari 的 viewport 缩放逻辑 - 接受“轻微不连续”——
clamp()的设计目标是可用性，不是像素级动画平滑
真正难调的从来不是公式，而是你盯着设计稿时，没意识到那个“完美标题尺寸”在 320px 和 1440px 上根本不可能用同一套比例舒服地存在。
