第五章 · 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)。

Chapter 5 · Section 5.1

Media Query Basics and Breakpoints

Media queries give CSS the ability to "sense its environment" — selectively applying a set of style rules based on viewport width, device orientation, the user's system preferences, and more. They are the foundation of responsive design.

Basic Syntax

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

When the condition holds, the rules inside the braces take effect; conditions are based on "media features", the most common being width / min-width / max-width.

Mobile-first vs Desktop-first

Two very different writing strategies, deciding whether the default styles target the smallest or the largest screen:

Strategy	Default styles target	Media queries use
Mobile-first	Smallest screen (no query wrapper)	min-width (progressive enhancement)
Desktop-first	Largest screen (no query wrapper)	max-width (progressive degradation)

/* mobile-first: single column by default, switch to two columns on wide screens */
.grid { grid-template-columns: 1fr; }

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

RecommendationMobile-first is today's mainstream practice: the default styles are the simplest and cover the widest range of devices, and you then progressively "enhance" toward large-screen layouts with min-width. It carries less cognitive load and fits the philosophy of progressive enhancement.

How to Choose Breakpoints

Rather than memorizing a pixel value, remember one principle: breakpoints should be determined by content, not by device model — when your layout starts to "look wrong" at some width (lines of text too long, cards squeezed too narrow), that is where a breakpoint belongs. The following are common reference ranges to start with:

Range	Typical devices	Common values
Extra-small	Phones in portrait	< 480px
Small	Phones in landscape / small tablets	≥ 480px
Medium	Tablets	≥ 768px
Large	Laptops	≥ 1024px
Extra-large	Desktop monitors	≥ 1280px

Combining Multiple Conditions

Use and to connect several features for "all must hold"; separate groups of queries with commas for "any may hold" (a logical OR).

/* width between 600px and 900px, and landscape */
@media (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
  ...
}

/* phones or print scenarios */
@media (max-width: 480px), print {
  ...
}

Modern CSS also supports range syntax, equivalent to the above but closer to math notation: @media (600px <= width <= 900px).