视口与媒体查询

媒体查询让样式根据环境条件选择性生效。最常见的条件是视口宽度，但还可以查询颜色方案、指针精度、屏幕方向和用户的减少动态偏好。断点应该由内容何时无法保持可读来决定，不应该只复制设备型号。

.layout { display: grid; grid-template-columns: 1fr; }

@media (min-width: 48rem) {
  .layout { grid-template-columns: 16rem 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms; transition-duration: .01ms; }
}

min-width 与 max-width 表达不同的覆盖方向；同时写出互相重叠的查询会把问题转移到层叠顺序。媒体查询本身不改变 DOM 顺序，也不能修复内容语义或超长文本。

实验与练习

从单列布局开始，在视口宽度逐步增加时记录第一次出现溢出的位置，再把该位置设为断点。分别切换深色模式和减少动态偏好，记录哪些规则变化来自环境而不是宽度。

可运行微实验：主题闭环

在 320px、768px、1440px 视口分别切换深色模式、横竖方向和减少动态偏好，记录 .layout 的列数与动画时长。把两个重叠的 min-width 查询调换顺序，说明层叠结果为何改变。

常见错误

• 为 iPhone、平板和桌面分别复制整套样式。
• 断点重叠却没有说明层叠结果。
• 只测试宽度，不测试方向、缩放和用户偏好。

继续阅读

下一篇把“先小屏，再扩展”变成样式组织策略：移动优先策略。

练习

1. 用最小输入复现“视口与媒体查询”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案