clamp()是最简洁可靠的移动端文字流式缩放方案，需合理配比min（推荐1rem）、preferred（如4vw）和max（≤1.5rem），并用rem/em兼顾可访问性，配合降级写法保障iOS 13以下兼容。
clamp() 是目前最简洁可靠的移动端文字流式缩放方案，但直接套用 clamp(16px, 2.5vw, 24px) 很可能在小屏上过小、大屏上卡死，关键在于基准值和视口单位的合理配比。
为什么 clamp() 比 vw 单独用更靠谱
单独用 2.5vw 会导致 iPhone SE（375px 宽）下字体仅约 9.4px，肉眼难读；而 clamp() 强制设定了最小值（min）和最大值（max），中间的 preferred 值只是“理想情况下的目标”，浏览器会自动在区间内线性插值——这正好匹配移动设备从手机到平板的连续尺寸分布。
常见错误是把 min 设成固定像素却忽略系统字号缩放（如 iOS「更大字体」辅助功能），导致可访问性失效。建议始终用 rem 或 em 作为 min/max 单位，例如 clamp(1rem, 2.5vw, 1.5rem)，再配合根元素 font-size 的响应式调整。
clamp() 三个参数的实际取值逻辑
格式为 clamp(min, preferred, max)，浏览器按以下顺序决策：
立即学习“前端免费学习笔记（深入）”；
- 若视口宽度使
preferred计算值 min，则采用min - 若计算值 >
max，则采用max - 否则采用计算值（注意：不是四舍五入，是精确线性映射）
实操建议：
-
min推荐设为1rem（约 16px），并确保html根字体默认为16px；若需支持系统缩放，可改用1.25rem配合媒体查询兜底 -
preferred用vw最直观，但数值要实测：从 375px 宽度反推，比如希望最小屏显示 16px，则16 / 375 * 100 ≈ 4.27vw，再向下微调至4vw防止边缘抖动 -
max不宜超过1.5rem（24px），否则 iPad Pro（1024px）下会达41px，破坏行高和布局
兼容性与降级必须做，尤其针对 iOS 13 以下
iOS 13.4 之前、Android WebView 旧版本、部分邮件客户端完全不支持 clamp()，直接忽略会导致字体回退到浏览器默认值（通常 16px），破坏设计一致性。
安全写法是「先写降级，再覆盖」：
h1 {
font-size: 1.5rem; /* 降级值，iOS 12 及以下生效 */
font-size: clamp(1rem, 4vw, 1.5rem); /* 覆盖，现代浏览器生效 */
}不要用 @supports 包裹——它本身在低版本中也不被识别，起不到渐进增强作用。真正的兼容保障靠的是降级值本身必须是设计可接受的兜底尺寸。
和 media query 混用时的优先级陷阱
如果同时写了 @media (min-width: 768px) { h1 { font-size: 2rem; } } 和 clamp()，结果取决于 CSS 级联顺序：后声明的规则会覆盖前声明的 clamp() 值，哪怕媒体查询条件未命中。这意味着 clamp() 可能被意外屏蔽。
正确做法是：
- 把所有响应式字号逻辑收束到
clamp()内部，避免混用 - 真需分段控制（比如横屏特殊处理），用
orientation媒体查询单独包裹整个规则块，而非叠加修改同一属性 - 调试时用浏览器 DevTools 的「Computed」面板看最终生效值，确认是否为
clamp()计算结果，而非被其他规则覆盖
流式缩放不是“设了 clamp() 就万事大吉”，它对视口宽度变化极其敏感，而很多安卓机型在软键盘弹出、地址栏收起时会触发虚假 resize，导致字体瞬间跳变——这种场景下，比起强行修复，不如对输入框等区域临时禁用流式，用固定字号保体验。
