什么是移动优先响应式策略，容器查询如何融入其中？

Question

Accepted Answer

**移动优先** 是指你首先为 **最小屏幕** 编写基础样式，然后使用 `min-width` 媒体查询为更大的屏幕 *添加* 复杂性 —— 而不是从桌面开始然后删除内容。

## 移动优先实践

```css
/* base: mobile — single column, simple */
.layout { display: grid; gap: 1rem; }

/* enhance for tablet and up */
@media (min-width: 768px) {
  .layout { grid-template-columns: 1fr 2fr; }
}
/* enhance further for desktop */
@media (min-width: 1200px) {
  .layout { grid-template-columns: 1fr 2fr 1fr; }
}
```

**移动优先的优势：** 基础 CSS 保持最小化（手机只获得其需要的内容 —— 在较弱设备上性能更好），而且你 *逐层添加* 复杂性，这比覆盖/删除要容易理解得多。它也符合内容从单列到多列的自然重排方式。

## 媒体查询的局限

媒体查询响应的是 **viewport** —— 整个窗口。但是可复用的组件（比如卡片）可能出现在同一页面上的宽主区域 *或* 窄边栏中。视口宽度无法告诉你 *组件* 实际上有多少空间。

## 容器查询解决这个问题

```css
.card-wrapper {
  container-type: inline-size;  /* declare it a query container */
}

/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: auto 1fr; }
}
```

现在同一张卡片会在其 *容器* ≥400px 时自动切换到水平布局 —— 无论是因为屏幕很大还是因为它在宽列中。该组件变成真正的 **与上下文无关且可复用**。

## 它们相辅相成

- **媒体查询** —— 页面级布局、全局断点、用户偏好设置（深色模式、减弱动画）。
- **容器查询** —— 可复用组件的组件级响应式设计。

## 为什么这很重要

移动优先保持响应式 CSS 简洁易维护。

容器查询是一个重大进步：它们使组件能够对其 *自身* 的可用空间做出响应，这正是组件化架构（设计系统、可复用卡片/小部件）所需的，其中同一个组件会在许多不同的场景中使用。