流体排版

什么时候用

• 大标题在小屏和大屏之间跨度很大，用媒体查询会看到字号一级一级地跳
• 想让标题、间距、圆角共用一个比例，跟着屏幕一起放大缩小
• 需要给字号设上下限，避免手机上一行放不下、超宽屏上又大得荒唐

适用场景：文字 / 页面 / 卡片

推荐取值

字号公式

clamp(1rem, 0.75rem + 1.2vw, 2.5rem)

正文字号下限

16px（不要低于 14px）

字号标度比

1.125–1.333

行高

标题 1.1–1.2，正文 1.5–1.6（无单位）

别搞混

• 和「媒体查询断点」的区别

  断点是「到某个宽度就换一套值」，两个断点之间字号是平的，跨过临界点会突然跳一下；流体排版把中间值写成带 vw 或 cqw 的 calc()，宽度一变字号就跟着连续变。

• 和「rem 固定字号」的区别

  rem 只跟根元素字号走，和屏幕宽度无关；rem 仍然要用，但想让文字跟着屏幕流起来，必须把 rem 和 vw 或 cqw 混进同一个 clamp() 里。

容易踩的坑

• 纯 vw 字号不跟浏览器的默认字号设置走：用户在浏览器里调大文字，vw 那一段不会跟着变大，而无障碍要求文字能放大到 200%。中间值要掺 rem，写成 clamp(1rem, 1rem + 2vw, 2.5rem)。
• vw 是视口宽度，不是父容器宽度。把流体标题放进窄卡片时会算出偏大的字号，这种场景要改用容器查询单位 cqw，并给父级加 container-type: inline-size。
• min 写成比 max 还大时 clamp() 不会报错，会直接取 min，页面上看起来完全没变化。
• 只流 font-size 不管 line-height，大标题会挤在一起或者行与行散开；行高要用无单位倍数，或者跟着一起 clamp。

无障碍降级

流体排版是静态排版，和 prefers-reduced-motion 无关。如果有人把它做成随滚动缩放字号，用户开启减少动态效果时应停在基准字号。

关键词

• clamp()
• vw
• cqw
• calc()
• fluid typography
• responsive font-size
• container query units

参考

• MDN · clamp()
• MDN · length（vw / cqw 等单位）

相关展品

• T-05可变字体Variable Font
• T-02平衡折行Text Balance
• T-04逐字显现Character Reveal