学习前提

完成盒模型、Flex 和 Grid，能使用开发者工具调整视口宽度。

本课完成后你能做什么

从内容需要选择断点，区分布局适配、触控适配和文字缩放，并形成可重复的验证步骤。

先理解机制

响应式不是为三款手机分别写三套页面，而是让布局在连续宽度范围内合理变化。先使用流动宽度、最大宽度、换行和自动布局，再只在结构需要改变时添加媒体查询。断点应该出现在内容开始拥挤的位置，而不是因为某个设备名称看起来常见。

viewport 声明让移动浏览器采用合适的布局视口，但它不能修复固定宽度的卡片。还要考虑文字变长、翻译、系统字体变大、屏幕旋转和输入方式。一个在鼠标下好用的小图标，到了触屏可能很难点击；一个只靠 hover 的菜单在键盘和触屏中可能根本无法打开。

可运行示例

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .layout { display: grid; gap: 24px; }
  img { max-width: 100%; height: auto; }
  @media (min-width: 768px) {
    .layout { grid-template-columns: 2fr 1fr; }
  }
</style>
<div class="layout"><main>Main content</main><aside>Notes</aside></div>

推演与验证

将 meta 放进 head，布局片段放进 body，逐步从1280px拖到320px，观察切换前后的内容顺序。不要只测两个端点：在断点前后各测一次。再替换成更长的英文段落并放大字体，检查正文、按钮和导航是否仍可使用。

常见错误与边界

避免用 overflow-x:hidden 掩盖所有问题，它可能把菜单和焦点指示一起裁掉。不要禁止用户缩放。媒体查询中重复覆盖大量具体值会增加维护成本，优先使用能够自然伸缩的基础规则。手机模拟器验证宽度，不等于已经测试真实设备上的软键盘和触控。

动手练习

为课程页面写测试矩阵：320、375、768、1280px，加上长标题、无图片和键盘操作。明确每项的通过条件。

参考解法与理由

通过条件应包括整页不横向溢出、主要操作可见、正文不截断、顺序合理、焦点可辨认。允许代码块独立横向滚动，但不能把它误判为整页失败。截图之外记录元素尺寸和实际操作结果，便于后续改版复测。

进一步阅读