怎样定义响应式布局与网格？

让页面随可用宽度调整排列，保持内容顺序和主要任务清楚。

响应式布局是让同一网页随可用空间调整排列，例如宽屏并排的内容在窄屏上下排列。它要适应浏览器宽度，而不只是给手机另画一张图。

先记住这几件事

• 容器 是装内容的区域； 网格 是帮助对齐和分配空间的列与间隔。
• 视口 是浏览器当前显示网页的区域，不等于设备屏幕的全部大小。
• 断点 是布局改变方式的条件，例如并排内容开始过于拥挤时改为单列。
• 保持信息与操作顺序合理，窄屏也要能完成主要任务。

RISD（罗德岛设计学院）的 视觉沟通基础讲义 说明了网格如何组织页面区域，也提醒网页需要在浏览器中检查。具体的网页布局与响应式条件见 USWDS 布局网格指南 。

决定布局的流程

布局变化的示意

以下是假设网页；具体断点取决于实际内容。

用一个例子走一遍

预约页在宽屏把说明和表单并排。团队逐渐缩窄浏览器，当说明与字段开始拥挤，就让两部分上下排列，并记录该变化条件。实现后再检查介于宽屏和窄屏之间的尺寸，确认没有横向挤出页面的按钮。

边界与常见误解

12 列网格是一种工具，不是所有网站必须遵守的规则。不能只检查两张固定尺寸截图；用户可以改变窗口、放大内容，文字长度也会变化。缩小所有内容不是响应式布局的完整解决办法。