clamp() 三参数需满足 min < preferred < max 才生效，否则取极值；推荐用 rem 配 vmin，按语义分层设系数，并为旧浏览器提供 fallback。
clamp() 三个参数到底怎么算才不卡死
写 clamp(16px, 2.5vw, 24px) 却发现 iPhone 上永远显示 16px，不是 bug，是计算结果被截断了：iPhone SE 视口宽 320px，2.5vw = 8px，小于 16px，浏览器直接取 min。clamp 不会“插值”，只做三选一判断。
真正生效的前提是：min < preferred < max 在某个视口区间内成立。实操建议：
- 先锚定设计稿宽度（比如 375px）和目标字号（比如 20px），算出基准系数：
20 / 375 * 100 ≈ 5.33，再向下微调到4.8vw防抖动 - 用
vmin替代vw更稳妥，横屏时取宽高较小者，避免单行文字撑出屏幕 - 别信“2–3vw 通用模板”——在 320px 屏上 2.5vw 才 8px，远低于可读下限
为什么 min/max 必须用 rem 而不是 px
硬写 clamp(14px, 4vmin, 20px) 看似省事，但 iOS「更大字体」辅助功能会失效：系统缩放后，14px 还是 14px，而用户实际需要的是等比放大后的 18px 或 22px。
正确做法是统一用 rem，并确保根元素默认 font-size: 16px：
立即学习“前端免费学习笔记（深入）”；
-
min推荐1rem（≈16px），小屏保底可读 -
max控制在1.5rem（≤24px），否则 iPad Pro 竖屏下可能达 41px，破坏行高 - 若需更强缩放支持，可设
min: 1.25rem+ 媒体查询兜底
如何让标题和正文保持视觉层级不坍塌
所有文本共用同一组 clamp() 参数，缩放后字号差会收窄甚至反超，比如 h1 和 p 在窄屏下都卡在 1rem，失去主次。
必须按语义分层设置系数：
-
h1 { font-size: clamp(1.5rem, 6vmin, 3rem); }—— 中间项系数最大，撑开层级 -
p { font-size: clamp(1rem, 4vmin, 1.25rem); }—— 系数降为 h1 的 2/3，维持约 1.5 倍比例感 -
small { font-size: clamp(0.875rem, 3vmin, 1rem); }—— 下限不低于 14px，防 Safari 渲染模糊
旧浏览器兼容和 viewport 设置这两个坑不能漏
Android 4.4、iOS 12.1 及更早版本不支持 clamp()，且 Safari 13.1–13.3 对 @supports (font-size: clamp()) 解析有 bug，会导致整条规则被跳过。
安全写法必须带 fallback：
- 前置声明：
font-size: 1.125rem; font-size: clamp(1.125rem, 4vmin, 1.5rem); -
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在，否则 vw/vmin 基准错乱（某些安卓 WebView 会以 980px 桌面宽度计算） - 绝对不要加
maximum-scale或user-scalable=no，部分浏览器会禁用视口缩放逻辑，导致vmin行为异常
clamp() 本身没有“响应式感知”，它只是拿一个动态值去套公式。真正决定效果的，是你给的那三个数是否覆盖了目标设备的真实视口区间——这没法靠模板，得实测真机横竖屏、地址栏展开/收起、折叠屏切换这些边界场景。
