我们知道自适应设计是一种不错的方法，可以提供最佳的多设备体验，而且自适应设计也可以提升可访问性。
假设存在一个像 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 像素，请参阅有关点按目标的更多指南。