响应式设计与媒体查询

这一节要完成什么

以小屏为默认，再为内容真正需要的断点增强导航、排版和布局。

先理解：为什么要学它

响应式不仅是列数，还包括字号、间距、点击区域和内容优先级。

跟着做

.page {
  padding-inline: 1rem;
}
.hero {
  display: grid;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .page {
    padding-inline: 2rem;
  }
  .hero {
    grid-template-columns: 1.3fr 0.7fr;
    align-items: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
  }
}

1. 把无媒体查询规则当成手机默认，先在 320px 完成任务。
2. 逐渐拉宽窗口，在内容显得松散的地方记录断点，而不是照设备型号。
3. 在第一个断点把 hero 改成两列，保持 DOM 顺序。
4. 开启系统减少动态效果设置，确认页面不依赖动画传达信息。

关键代码怎么读

• 响应式不仅是列数，还包括字号、间距、点击区域和内容优先级。
• 使用相对单位让用户缩放仍有效。
• 断点越少越容易维护，只有布局真正坏掉才加。

常见错误：看到什么，检查什么

自己完成一次

完成 320、768、1280px 三档检查表：导航、hero、卡片、表格和表单都可使用。

完成检查

• 我完成了本节要求的可见结果
• 我能解释关键代码的输入、处理和输出
• 我测试了正常、边界和错误情况