重排

要求内容

当视口宽度为 320 CSS 像素时——相当于 1280px 桌面端放大至 400%，或小型移动设备——内容必须重排为单列，无需水平滚动。用户绝不应同时进行垂直和水平滚动才能阅读连续内容。允许一些必要例外：数据表格、复杂地图、代码示例以及二维滚动属于内容本身特性的演示文稿。

如何满足

• 采用移动优先布局，使用 flexbox 或 CSS grid，使其在小宽度下折叠为单列。
• 精确在 320px 视口宽度下进行测试——或在 1280px 窗口以 400% 浏览器缩放比例测试——并逐页检查。
• 对图片、视频和嵌入式媒体使用 max-width: 100%，使其随视口缩小。
• 对于导航，在适当断点将桌面横向导航折叠为纵向移动菜单。
• 对于数据表格，允许在 overflow-x: auto 包装器内部水平滚动——表格本身属于豁免情形，但其容器不应使整个页面横向滚动。
• 不要在页面主体容器或模态框上使用固定像素宽度。

常见失败情形

• 固定宽度的主视觉区域（width: 1200px）在 320px 时溢出视口，强制出现水平滚动条。
• 模态对话框以 vw 或 px 为单位设置尺寸，超过 320px 宽度并在小屏幕上被裁剪。
• <pre> 代码块无自动换行或滚动容器，使页面变宽。
• 营销页面中含有绝对定位的装饰元素，未考虑窄视口场景。
• 粘性元素在 400% 缩放时遮挡内容，因为其尺寸是按全宽视口设计的。
• 数据表格未包裹在溢出容器中，导致整个页面横向滚动，而非仅表格内部滚动。

重要性

重排是发现大多数”响应式但实际上并不响应”网站的成功准则——在 320 CSS 像素宽度下布局崩溃，等同于桌面端低视力用户以 400% 缩放时布局崩溃，二者在数学上是同一情形。修复重排通常意味着强化已接近完成的响应式设计，因此它是 WCAG 修复中效益最高的项目之一。