clamp() 三参数需满足 min
clamp() 三个参数到底怎么算才不卡死
写
clamp(16px, 2.5vw, 24px)却发现 iPhone 上永远显示 16px，不是 bug，是计算结果被截断了：iPhone SE 视口宽 320px，2.5vw= 8px，小于16px，浏览器直接取 min。clamp 不会“插值”，只做三选一判断。真正生效的前提是：
min 在某个视口区间内成立。实操建议：
- 先锚定设计稿宽度（比如 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() 本身没有“响应式感知”，它只是拿一个动态值去套公式。真正决定效果的，是你给的那三个数是否覆盖了目标设备的真实视口区间——这没法靠模板，得实测真机横竖屏、地址栏展开/收起、折叠屏切换这些边界场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
