我们知道，自适应设计是一种不错的做法，可以提供最佳的多设备体验，但自适应设计也可以提升无障碍功能。
假设存在一个像 Udacity 一样的网站：
对于阅读小号印刷字体存在困难的视力较弱的用户来说，他们可能会放大页面，最高可能会放大到 400%。由于网站采用自适应设计，界面会针对“较小视口”（实际上是较大页面）自动重排，这一特性非常适合需要放大屏幕的桌面用户和移动设备屏幕阅读器用户。这对双方来说都是双赢。 下面是相同页面放大到 400% 的效果：
事实上，仅仅通过自适应设计，我们就可以满足 WebAIM 检查单第 1.4.4 条规则的要求，其表述为页面“...应在文本大小加倍的情况下便于阅读和正常发挥作用。”
详细介绍自适应设计不在本指南的范围之内，以下几条建议有助于您实现自适应设计并让用户更方便地访问您的内容。
使用视口元标记
<meta name="viewport" content="width=device-width, initial-scale=1.0">
设置 width=device-width 将匹配屏幕宽度（以设备无关像素为单位），设置 initial-scale=1 将在 CSS 像素与设备无关像素之间建立 1:1 的关系。这样，浏览器会将您的内容调整为适合屏幕尺寸，用户看到的不会是一堆揉在一起的文本。
如需了解详情，请参阅根据视口调整内容大小。
允许用户缩放
您可以使用视口元标记设置 maximum-scale=1 或 user-scaleable=no，以防止缩放。请避免这样做，并在需要时让用户放大。
灵活设计
避免将目标设定为特定的屏幕尺寸，而是使用灵活的网格，在内容指示时对布局进行更改。正如我们在上面的 Udacity 示例中所看到的，无论空间是因较小的屏幕还是较高的缩放级别导致的，此方法都能确保设计能够做出响应。
如需详细了解这些技术，请参阅自适应网站设计基础知识一文。
针对文本使用相对单位
为了充分利用灵活网格，请使用 em 或 rem 等相对单位来表示文本大小等，而不是像素值。某些浏览器仅支持在用户偏好设置中调整文本大小，如果您为文本使用像素值，此设置不会影响您的副本。不过，如果您完全使用相对单位，网站副本将更新以反映用户偏好。
这样，整个网站便会随着用户缩放而重新流动，从而为用户打造使用您网站所需的阅读体验。
避免将可视化视图与源代码顺序断开连接
使用键盘在您的网站中按 Tab 键切换的访问者将按照 HTML 文档中内容的顺序进行切换。使用 Flexbox 和 Grid 等新型布局方法时，很容易导致视觉呈现与源代码顺序不一致。这可能会导致使用键盘移动的用户在页面中跳转，令人不安。
请务必通过按 Tab 键浏览内容，在每个断点处测试您的设计，看看网页上的流程是否仍然合理。
详细了解源和视觉显示屏断开连接。
谨慎使用空间线索
撰写微文本时，请避免使用指明元素在页面上的位置的语言。例如，如果导航栏位于屏幕顶部，在移动版中提及“左侧”导航栏就没有意义。
确保触摸屏设备上的点按目标足够大
在触摸屏设备上，请确保点按目标足够大，使其能够在不点击其他链接的情况下轻松激活。任何可点按的元素的理想尺寸为 48 像素，请参阅有关点按目标的更多指南。