CSS 媒体查询
响应式设计确立了思路：一棵 HTML 树、viewport meta、流式外壳、相对单位。媒体查询是开关 — 仅在条件成立时生效的 CSS 块（通常是视口宽度）。本课教语法与克制习惯；响应式图片与 Breakpoints 会继续加深工具箱。
媒体查询工具箱
📊 媒体查询一览
| 部件 | 日常作用 |
|---|---|
@media |
打开条件 CSS 块 |
媒体特性（min-width、max-width、…） |
浏览器求值的测试 |
and |
要求列出的每个特性都匹配 |
| 逗号分隔的查询 | 逻辑 或 — 任一匹配列表即可 |
{ } 内的规则集 |
仅在查询匹配期间应用的样式 |
媒体类型（screen、print） |
可选的输出介质过滤 |
没有查询时，每条规则都「始终开启」。有了查询，你保留上一课的稳固基础，并按层 叠加 变化 — 更宽的栏、更大的字号、不同导航 — 只在视口撑得住时才加。
@media 解剖
经典写法：括号里写特性，再跟一对花括号里的普通声明。宽度尽量用 rem 或 em — 比硬编码设备像素列表更能随根/排版设置缩放。
.nav {
display: block;
}
@media (min-width: 48rem) {
.nav {
display: flex;
gap: 1rem;
}
}
用 min-width 做 mobile-first
在基础样式表里写窄屏布局。用 @media (min-width: …) 在视口变宽时 追加 增强。每一步只改一层清楚的东西 — 间距、栏或导航 — 不要每一步都重写整页。
.hero {
padding: 1rem;
font-size: 1.125rem;
}
@media (min-width: 40rem) {
.hero {
padding: 2rem;
font-size: 1.25rem;
}
}
@media (min-width: 64rem) {
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
用 max-width 做 desktop-first
若基础是宽屏布局，@media (max-width: …) 在阈值以下 收紧 样式 — 栏叠起来、减小 padding、简化 chrome。项目内保持一致：不要无故在纯 min-width 与纯 max-width 栈之间来回跳。
.sidebar {
width: 16rem;
float: left;
}
@media (max-width: 50rem) {
.sidebar {
width: 100%;
float: none;
}
}
用 and 组合特性
把特性串起来，使 全部 必须匹配。适合范围（min 与 max 一起）或把宽度与另一特性配对。整段 @media 列表之间的逗号表示 或。
.card-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
.card-grid {
grid-template-columns: 1fr 1fr;
}
}
不止宽度 — 打印（以及克制的附加）
宽度是日常工具。像 print 这类类型会为纸张隐藏 chrome。偏好特性（例如 prefers-reduced-motion）属于无访问性打磨 — 这里少用；Breakpoints 课整理策略，无访问性课稍后讲动效。
@media print {
.site-nav,
.ad-slot {
display: none;
}
body {
color: #000;
background: #fff;
}
}
克制的 breakpoint 习惯
选一份短的、有命名的宽度列表，对齐 你自己的 布局压力点 — 不是每一款手机型号。写进文档（例如「导航在 48rem 以下折叠」）。流式基础 + 少量查询，胜过按设备堆规则的森林。后续课覆盖图片与更完整的 breakpoint 计划。
自己动手
- 拿一个纵向堆叠的导航，加一条
@media (min-width: …)把它切到 flex。 - 用 desktop-first 的
max-width收紧重写同一思路 — 留意基础样式的差异。 - 用
min-width和max-width加一条范围查询，只覆盖两栏区间。 - 用
@media print隐藏装饰性横幅。 - 为练习页写三个命名 breakpoint — 列表保持简短。
常见错误
- 为每个设备品牌单独写查询，而不是布局压力点
- 忘记闭合
}，导致后面的 CSS 被吞进查询里 - 随意混用 min-width 与 max-width 栈，直到 cascade 自相冲突
- 只靠查询，却忽略响应式设计课里的流式容器与相对单位
- 在这里倒入长长的 breakpoint 目录 — 那门手艺在 Breakpoints 继续；图片在响应式图片课
小结
- 媒体查询包裹 CSS，使其仅在条件匹配时生效
min-width向上增强（mobile-first）；max-width向下收紧（desktop-first）and要求所有特性；查询之间的逗号充当或- 用少量、有命名、贴合真实布局需求的 breakpoints
- 下一课：响应式图片 — 能缩放且不撑破栏的媒体
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部