A08 响应式与媒体查询

摘要：响应式不是为每个设备写一套样式，而是让同一套规则在任意宽度下都不出问题。做法有三条：移动优先书写、断点按内容而非机型选取、尺寸尽量用相对单位。本文给出媒体查询的写法、断点选择的依据，以及三条避免横向滚动的规则。
关键词：响应式，媒体查询，断点，移动优先，相对单位

所属：frontend/css / A-入门 ｜ 上一篇：A07-Grid布局 ｜ 下一篇：A09-实战给页面加样式

1 引言

手机端的常见故障只有一个：横向滚动。它由固定宽度、超长内容、未压缩图片三类原因造成，与断点数量无关。

本文给出移动优先的写法与三条硬性规则。范围见表 1-1。

项	本文覆盖	本文不覆盖
媒体查询	min-width、max-width、prefers-*	容器查询（C01）
断点	按内容定断点的方法	设备型号清单
单位	rem、%、vw、clamp()	完整单位体系（B02）

2 预备知识

项	要求	核对方式
环境	本地服务器可用	浏览器能打开 localhost
文件	css-practice/responsive.html	编码 UTF-8
浏览器	Chrome 130+，设备工具栏可用	能模拟 360 像素宽
前置	A06、A07	会写两种布局

3 原理与实现

3.1 移动优先的书写顺序

先写窄屏规则，再用 min-width 逐步追加宽屏规则，如图 3-1 所示。

flowchart LR
    A["基础样式<br/>窄屏可用的单列"] --> B["@media min-width: 40rem<br/>两列"]
    B --> C["@media min-width: 60rem<br/>三列 + 侧栏"]
    C --> D["同一份 CSS<br/>所有宽度可用"]

图 3-1 移动优先的叠加顺序

图上可见：宽屏规则只追加不覆盖，窄屏不需要任何媒体查询；反向书写（桌面优先）则需要不断重置样式。

3.2 媒体查询与自适应单位

/* 运行环境：Chrome 130+；css-practice/responsive.css */
.container {
  padding-inline: 1rem;
  margin-inline: auto;
  max-width: 72rem;
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }

img { max-width: 100%; height: auto; }

@media (min-width: 40rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .container { padding-inline: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

断点选择与单位使用见表 3-1。

项	建议	说明
断点数量	2 ~ 3 个	越多越难维护
断点依据	内容开始拥挤的宽度	不看具体机型
书写方向	移动优先，min-width	只追加不重置
字号	rem + clamp()	随视口平滑变化
容器宽度	max-width + margin-inline: auto	大屏留白，不贴边
图片	max-width: 100%	防止撑破容器
高度	100dvh 而非 100vh	避开移动端地址栏计算差异

4 验证与讨论

1. 打开页面，在设备工具栏把宽度从 360 拖到 1440，确认列数按 1 → 2 → 3 变化。
2. 检查 360 像素宽时是否出现横向滚动条。
3. 用系统设置开启「减少动态效果」，刷新，确认动画被禁用。
4. 把某张图片宽度写死为 1200px，观察窄屏出现横向滚动，再改回 max-width: 100%。

检查项	预期结果	说明
列数变化	1 → 2 → 3	两个断点
无横向滚动	任意宽度下无滚动条	图片与长文本已处理
字号平滑	标题在宽屏略大但不跳变	clamp()
动效偏好	开启减少动效后无动画	prefers-reduced-motion

讨论与局限。 断点按内容定，因此不同组件可以有不同断点；把全站压成三个统一断点会让某些组件在中间宽度出错。另 vw 在出现滚动条时会略大于可视宽度，用 clamp() 限制上下界可避免。

5 常见问题

现象	原因	处理
手机端页面整体缩小	head 缺少 viewport 声明	补 width=device-width, initial-scale=1
出现横向滚动	固定宽度或未限制图片	改相对单位，加 max-width: 100%
媒体查询不生效	写在基础样式之前	调整顺序，宽屏规则放在后面
断点内样式被覆盖	权重不足	提高选择器权重，避免 !important
折叠屏或平板错位	只按机型写断点	改为按内容定断点

6 结论

序号	结论	依据
1	移动优先只追加，不重置	图 3-1
2	断点按内容拥挤程度选取	表 3-1
3	图片一律 max-width: 100%	表 3-1
4	动效需响应 prefers-reduced-motion	3.2 节代码

• 上一篇：A07-Grid布局
• 下一篇：A09-实战给页面加样式
• 返回：A00-总结 ｜ 科目 README

参考文献

[1] MDN Web Docs · 使用媒体查询，https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries（访问于 2026-10-31）
[2] web.dev · 响应式设计基础，https://web.dev/articles/responsive-web-design-basics（访问于 2026-10-31）