流体排版应优先使用 clamp() 实现安全字号控制，如 clamp(1.125rem, 4vw, 2.25rem)，避免裸用 calc() + vw 导致极端尺寸；若需兼容旧浏览器，则用多断点媒体查询配合递减斜率的 calc() 兜底，并注意行高、内联元素及真机渲染差异。
流体排版不是靠一堆媒体查询堆出来的，而是用 calc() + vw 算出一个随视口平滑变化的值；但直接写 font-size: calc(16px + 2vw) 很容易在小屏上过大、大屏上过小，必须加约束。
为什么 calc(16px + 0.5vw) 在手机上会炸开？
因为 vw 是按视口宽度算的：iPhone SE（375px）下，0.5vw 是 1.875px，加上 16px 才约 17.9px，看起来还行；但换成 iPad Pro（1024px），0.5vw 就变成 5.12px，总字号达 21.12px —— 还没完，如果用户缩放 150%，或系统启用“更大字体”辅助功能，这个值还会叠加放大，文字可能撑破容器。
更麻烦的是，vw 包含滚动条宽度（某些浏览器在计算时把竖向滚动条算进视口，有些不算），导致同一设备不同系统版本下渲染不一致。
- 别单独依赖
vw增量，它没有下限保障 - 避免在
font-size中使用纯加法表达式，除非你明确接受极端尺寸 - 移动端优先项目，建议把基础值设得稍小（比如
14px而非16px），给增长留余地
如何用 clamp() 替代裸 calc() 实现安全流体字号？
clamp() 是目前最干净的解法：它原生支持最小值、首选值、最大值三段约束，且现代浏览器（Chrome 88+、Safari 13.1+、Firefox 79+）已全覆盖。例如：
立即学习“前端免费学习笔记（深入）”；
h1 { font-size: clamp(1.125rem, 4vw, 2.25rem); }这行代码的意思是：字号至少为 1.125rem（18px），最多不超过 2.25rem（36px），中间尽量贴近 4vw 的计算结果。
-
clamp()内部的中间值可以是任意合法 CSS 表达式，包括calc(1rem + 1.5vw) - 不要写成
clamp(calc(1rem), calc(2rem + 1vw), calc(3rem))—— 多余的calc()不仅无意义，还可能触发旧 Safari 的解析 bug - 如果要兼容 IE 或老 Android Browser，必须降级为媒体查询 + 固定字号组合，
clamp()无 polyfill
当 clamp() 不可用时，怎么用 calc() + 媒体查询兜底？
核心思路是：用媒体查询切出 2–3 个关键断点，在每个区间内用 calc() 做局部线性过渡，而不是试图一根表达式打全场。
@media (min-width: 320px) and (max-width: 480px) {
h1 { font-size: calc(14px + 0.26vw); } /* 320px→14.83px, 480px→15.99px */
}
@media (min-width: 481px) and (max-width: 768px) {
h1 { font-size: calc(16px + 0.18vw); } /* 481px→16.86px, 768px→18.38px */
}
@media (min-width: 769px) {
h1 { font-size: calc(18px + 0.08vw); } /* 769px→18.61px, 1200px→19.16px */
}- 每个区间的斜率（
vw系数）要递减，否则大屏会突兀变大 - 断点选设备常见宽度（如 320、480、768、1024），别用随意数字
- 所有区间首尾字号需手动对齐，比如上一段结尾是
15.99px，下一段开头就得从接近值起步，否则有跳变
实际项目中容易被忽略的细节
流体排版真正难的从来不是写对那一行 font-size，而是后续连锁反应：
- 行高
line-height如果写死1.5，字号变大后行距会显得拥挤；建议也用clamp()或相对单位（如1.3em） - 内联元素（
span、strong）若设置了font-size，会破坏祖先的流体继承链，要统一用em或rem控制 - 用
vw算间距（margin、padding）时，注意它和父容器width的关系 —— 如果父容器本身用了max-width，那子元素的vw间距就可能超出预期 - 真机测试比模拟器重要：iOS Safari 对 sub-pixel 渲染更激进，Android Chrome 则常四舍五入，同一行
calc(1rem + 0.33vw)在两台设备上可能差 1px
