我们知道，最好采用自适应设计，以提供最佳的多设备体验。 而自适应设计也能在无障碍功能方面取得理想成效。
以 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 键在内容上导航，以测试您的设计， 浏览网页的流程是否仍然有意义？
详细了解来源显示和视觉显示断开连接。
小心空间线索
撰写显微镜时，请避免使用表明网页上某个元素位置的语言。 例如，所谓的导航“位于左侧”在移动版中毫无意义 当导航位于屏幕顶部时。
确保点按目标在触摸屏设备上足够大
在触摸屏设备上，确保点按目标足够大 ，使其无需点击其他链接即可轻松激活。 48px 是所有可点按元素的理想尺寸。 详细了解点按目标。