我们知道，响应式设计是提供最佳多设备体验的好方法，但响应式设计也为无障碍功能带来了好处。
以 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 示例中看到的那样，无论空间缩小是由于屏幕较小还是放大级别较高，这种方法都能确保设计做出响应。
您可以在响应式 Web 设计基础知识文章中阅读有关这些技术的更多信息。
文本使用相对单位
为了充分利用您的灵活网格，文本大小等事物请使用 em 或 rem 等相对单位，而不是像素值。某些浏览器仅支持在用户偏好设置中调整文本大小，如果您对文本使用像素值，则此设置不会影响您的副本。但是，如果您自始至终都使用了相对单位，则站点副本将更新以反映用户的偏好设置。
这将使整个站点在用户缩放时重新流动，从而创建他们使用您的网站所需的阅读体验。
避免断开视觉视图与源顺序的连接
使用键盘在您的网站上进行制表符浏览的访问者将遵循 HTML 文档中内容的顺序。当使用 Flexbox 和 Grid 等现代布局方法时，很容易使视觉渲染与源顺序不匹配。这可能会导致使用键盘在页面上移动的人出现令人不安的跳转。
确保通过制表符浏览内容来测试每个断点处的设计，页面上的流程是否仍然有意义？
阅读有关源和视觉显示断开连接的更多信息。
注意空间线索
在编写微文案时，避免使用指示页面上元素位置的语言。例如，当导航位于屏幕顶部时，引用“左侧”的导航在移动版本中毫无意义。
确保触摸屏设备上的点击目标足够大
在触摸屏设备上，请确保您的点击目标足够大，以便于激活，而不会点击其他链接。任何可点击元素的理想尺寸为 48 像素，请阅读有关点击目标的更多指南。