第五章 · 5.1 节

媒体查询基础与断点设计

媒体查询让 CSS 具备了"感知环境"的能力——根据视口宽度、设备方向、用户的系统偏好等条件，有选择地应用一组样式规则，是响应式设计的基石。

基本语法

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

条件成立时，花括号内的规则才会生效；条件基于"媒体特性"（media feature），最常用的是 width / min-width / max-width。

移动优先 vs 桌面优先

两种截然不同的书写策略，决定了默认样式面向的是最小屏幕还是最大屏幕：

策略	默认样式面向	媒体查询用
移动优先	最小屏幕（无查询包裹）	min-width（逐步增强）
桌面优先	最大屏幕（无查询包裹）	max-width（逐步降级）

/* 移动优先：默认单列，宽屏时改双列 */
.grid { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

推荐移动优先是当下的主流实践：默认样式最简单、覆盖设备最广，后续用 min-width 逐步"增强"到大屏布局，心智负担更低，也更契合渐进增强的设计哲学。

断点该怎么定

与其死记某个像素值，不如记住一条原则：断点应该由内容决定，而不是由设备型号决定——当你的布局在某个宽度开始"看起来不对劲"（文字过长一行、卡片过窄挤压），那就是断点该出现的地方。以下是常见的参考区间，供起步时使用：

区间	典型设备	常见取值
超小屏	手机竖屏	< 480px
小屏	手机横屏 / 小平板	≥ 480px
中屏	平板	≥ 768px
大屏	笔记本	≥ 1024px
超大屏	桌面显示器	≥ 1280px

组合多个条件

用 and 连接多个特性，实现"同时满足"；用逗号分隔多组查询，实现"任一满足"（相当于逻辑或）。

/* 宽度在 600px 到 900px 之间，且是横屏 */
@media (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
  ...
}

/* 手机 或 打印场景 */
@media (max-width: 480px), print {
  ...
}

现代 CSS 还支持区间语法，等价于上面的写法但更接近数学表达：@media (600px <= width <= 900px)。