真正无断点、可落地的流式排版必须用 clamp() 或 max()/min() 组合兜底，因 calc(16px + 0.5vw) 无边界意识，小屏易跌破 12px 致不可读，且不响应可读性阈值。
单纯用 calc(16px + 0.5vw) 做字体响应，大概率会在小屏下变得不可读（比如手机竖屏时 0.5vw ≈ 1.6px，最终字号接近 17.6px，看似还行，但若基础值设低或 vw 系数偏小，极易跌破 12px），这不是“流式”，是“裸奔”。真正无断点、可落地的流式排版，必须靠 clamp() 或 max()/min() 组合兜底。
为什么 calc + vw 单独用会失效
纯 calc() 是线性函数，没有边界意识。它不会主动阻止你写出 font-size: calc(8px + 0.3vw) 这种在 320px 屏幕上仅得 17.6px、但在 1440px 屏幕上飙到 51.2px 的失控表达式。更糟的是：当视口缩到极窄（如折叠屏竖向 280px），0.3vw = 0.84px，叠加基础值后仍可能低于最小可读阈值，而浏览器不会报错，只会默默渲染出糊成一片的小字。
- 常见错误现象：
white-space: nowrap的标题在小屏被截断，不是因为容器窄，而是字体太小导致letter-spacing或line-height失效，文字视觉上“挤出”边界 - 根本原因：
calc()不做取值范围判断，只做算术运算 - 兼容性陷阱：IE 完全不支持
vw，但现代项目已无需考虑；真正要防的是 Safari 15.4 之前对clamp()的部分解析 bug（需加@supports检测）
用 clamp() 替代 calc 实现安全流式字体
clamp(min, preferred, max) 是专为流式排版设计的函数，它把“计算逻辑”和“安全边界”封装在一起。你不需要手动写比例插值公式，也不用嵌套 max(min())。
- 正确写法：
font-size: clamp(1.125rem, 4.5vw, 2.25rem);—— 表示字体在1.125rem（18px）到2.25rem（36px）之间，优先按4.5vw动态变化 - 换算技巧：把最小宽度（如 320px）对应最小字号（18px）换算成 vw：
18px / 320px * 100 = 5.625vw；最大宽度（1440px）对应最大字号（36px）得2.5vw；但实际中直接用中间值（如4.5vw）更平滑，避免拐点生硬 - 性能影响：
clamp()和calc()渲染开销几乎一致，无额外重排成本
当必须用 calc 时，如何手动模拟 clamp 行为
某些老项目尚未启用 clamp()，或需要兼容特定构建工具链，此时可用 max() + min() 组合逼近等效效果。
立即学习“前端免费学习笔记（深入）”；
- 等价写法：
font-size: max(1.125rem, min(4.5vw, 2.25rem)); - 注意顺序：必须外层
max()包min()，否则无法同时限制上下界；写反（min(max())）会导致结果恒为最小值 - 单位一致性：所有参数必须带单位，
max(18px, min(4.5vw, 36px))合法，但max(18, min(4.5vw, 36))会因缺失单位被整个忽略 - 不要试图用
calc()去“修正” vw：例如calc(4.5vw + 0.1em)仍是无边界的，只是让曲线斜率变复杂，没解决本质问题
配合布局属性防止文字溢出或撑破容器
再好的字体响应，遇上固定宽高容器 + white-space: nowrap 也会翻车。必须同步约束容器行为。
- 关键组合：
font-size: clamp(1.125rem, 4.5vw, 2.25rem); width: min(100%, 80ch);—— 用字符数上限替代像素上限，更语义化 - 防截断必备：
overflow-x: hidden; text-overflow: ellipsis;要搭配display: block和white-space: nowrap才生效 - 警惕
max-width: 100vw：在有滚动条的页面中，100vw包含滚动条宽度，可能导致内容被横向裁剪；改用max-width: 100%或max-width: calc(100vw - 16px)（粗略估算滚动条）
真正无断点的流式排版，核心不在“能不能算”，而在“敢不敢设边界”。clamp() 不是语法糖，它是把设计师对可读性的判断，直接编码进 CSS 的声明式契约。别再用 calc() 徒手造轮子——边界条件漏一个，小屏用户就少看一行字。
