本页面借助 AI 辅助翻译。英文原文为权威版本。
这些指南的第一版预设了一块屏幕：单一、固定在桌面、尺寸可预测。这个前提已不复存在。同一个段落如今必须在一臂之外的手机、平板、笔记本和一面墙大小的显示器上都读得舒服——更重要的是，它必须对放大了系统字体、把页面缩放到 400%，或两者兼有的人同样友好。流体排版是让文字在这一范围内缩放的手艺；无障碍的流体排版，则是在做到这一点的同时不悄悄推翻读者的决定。
流体缩放与 clamp() 函数
现代惯用手法用 CSS 的 clamp() 函数设定字号：一个最小值、一个随视口增长的首选值和一个最大值。文字不再在断点处于固定尺寸之间跳变，而是平滑滑动——桌面上气派的标题在手机上从容缩小，断点从未妥善照顾到的尴尬中间宽度也被自动处理。
用得好，这是可读性的真正收益；用得草率，它会制造出一类新的无障碍失败，而且这种失败隐蔽到足以躲过随手的测试。
无障碍方面的警示
本书的一切都建立在一份契约之上：读者的字号设置说了算。浏览器允许用户设定默认字号；操作系统提供文本缩放；WCAG 1.4.4（调整文本大小）要求文本可以放大到 200% 而不丢失内容或功能。流体公式可能以两种方式悄悄撕毁这份契约。
其一，纯粹建立在视口单位上的公式——比如只由 vw 推导的字号——完全不响应用户的字号偏好。页面看上去流畅而现代，而把浏览器默认字号调大的读者却看不到任何效果。补救办法是把公式建立在 rem 之上：最小值和最大值用 rem，首选值在视口项之外再加一个基于 rem 的分量。这样整套缩放就骑在用户设置之上，理应如此。
其二，clamp 本身可能与缩放对抗。读者缩放页面时，视口单位在 CSS 意义上会变小，于是 vw 占比过高的公式会部分抵消缩放：读者放大页面，文字的放大幅度却小于缩放系数，极端情况下达不到 WCAG 1.4.4 要求的 200%。任何流体缩放方案都必须在高倍缩放下实际测试——而不是想当然。
回流与 400% 缩放
WCAG 1.4.10（回流）要求内容在 320 CSS 像素宽度下——相当于 1280 像素窗口缩放到 400%——无需水平滚动即可阅读。许多低视力读者常年生活在这样的放大倍数下。诚实的流体字号在这里能帮上忙：在该有效宽度下，缩放比例应处于最小值，行长应缩短，任何东西都不应逃出视口。定宽容器、文本的绝对定位，以及拒绝折叠的多栏布局是常见元凶。请在 400% 下测试每一个阅读页面；只需一分钟，而这正是这些失败的藏身之处。
容器查询
媒体查询问的是窗口有多大；容器查询问的是组件自身的盒子有多大——这通常才是排版真正需要回答的问题。卡片无论放在侧栏还是横贯整页都还是卡片，如今它的文字可以响应自己的宽度，用容器查询单位在组件内部实现流体字号。同样的警示原封不动地适用：容器相对单位对读者的字号偏好一无所知，因此它们也必须与基于 rem 的项组合使用，并在缩放下测试。
小工具，真收益
近年的几个 CSS 属性直接解决了古老的排版问题：
- text-wrap: balance 平衡短文本块的行长——首先是标题——消除长首行下面孤零零两个词的尾行。它面向少数几行文字，不适用于正文。
- text-wrap: pretty 让浏览器在段落断行上投入更多计算，避免孤词结尾、改善右缘参差。各渲染引擎的支持仍不均衡；应视为渐进增强。
- font-size-adjust 将回退字体的 x字高匹配到它所顶替的网页字体。在网页字体加载期间——或永远没有到达时——回退字体以等效的视觉尺寸渲染，从而减少布局位移，并让回退文本保持与预期字体相当的易读性。考虑到大量阅读发生在字体加载完成前的那几秒，这个不起眼的属性当之无愧。
本章为何是新增内容
2005 年没有流体排版，因为没有可供流动的跨度：移动网页几乎不存在，响应式设计要到 2010 年才被提出，而 clamp()、容器查询、text-wrap 控制以及获得广泛支持的 font-size-adjust 都是近几年的产物。屏幕的多样性制造了问题；CSS 直到最近才提供了工具；而围绕这些工具的无障碍纪律则更为年轻。
CSS 实现
h1 {
/* fluid between bounds; the rem term preserves zoom and settings */
font-size: clamp(2.25rem, 1.4rem + 3.5vw, 4.5rem);
text-wrap: balance;
}
p { font-size: 1rem; text-wrap: pretty; }
/* Test at 200% and 400% zoom — WCAG 1.4.4 and 1.4.10 */建议
- 用 rem 构建流体缩放：最小值、最大值，以及首选值中的 rem 分量，让用户的字号偏好得以传导。
- 绝不单独用视口单位设定字号。
- 在 200% 缩放、400% 缩放以及调大浏览器默认字号三种条件下测试每个模板——三项不同的测试，缺一不可。
- 验证 WCAG 1.4.10：在 320 CSS 像素宽度下阅读无需水平滚动。
- 用容器查询做组件级的排版决策，并遵守同样的 rem 纪律。
- 给标题应用 text-wrap: balance；为正文启用 text-wrap: pretty 作为渐进增强。
- 定义 font-size-adjust（以及尺寸匹配的回退字体），使文本在网页字体加载前和缺失时依然易读。