Media queries 如何实现响应式设计？

Question

Accepted Answer

**Media queries** 根据设备特性——最常见的是 **viewport width**——有条件地应用 CSS，让单一样式表能够适应手机、平板和桌面设备。

```css
/* base styles (mobile-first) */
.container { padding: 1rem; }

/* apply only when viewport is AT LEAST 768px wide */
@media (min-width: 768px) {
  .container { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; }
}

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

## Mobile-first (min-width) vs desktop-first (max-width)

```css
/* ✅ mobile-first: base = mobile, layer on enhancements as it gets wider */
@media (min-width: 768px) { ... }

/* desktop-first: base = desktop, override down for smaller screens */
@media (max-width: 767px) { ... }
```

**Mobile-first**（`min-width`）通常是首选方案：为小屏幕编写简单的基础样式，然后为更大屏幕逐步添加复杂性。这往往能产生更清洁、更轻量的 CSS，并与内容重排的方式相匹配。

## 其他有用的查询

```css
@media (max-width: 600px) { }                 /* small screens */
@media (orientation: landscape) { }            /* device orientation */
@media (prefers-color-scheme: dark) { }        /* user wants dark mode */
@media (prefers-reduced-motion: reduce) { }    /* user dislikes animation — accessibility */
@media print { }                                /* print stylesheet */
```

`prefers-reduced-motion` 和 `prefers-color-scheme` 响应用户*偏好*而非屏幕尺寸——对无障碍访问和主题配置很重要。

## 组合条件

```css
@media (min-width: 768px) and (max-width: 1023px) { /* tablets only */ }
```

## 关于未来的说明：Container queries

Media queries 响应 **viewport**；较新的 **container queries**（`@container`）响应*父元素的*尺寸——对真正可复用的组件更有利。它们是 media queries 的补充而非替代。

## 为什么这很重要

Media queries 是响应式设计的基础——根据屏幕尺寸调整布局、间距和列。

Mobile-first `min-width` 方法使 CSS 更易管理，而偏好查询（`prefers-reduced-motion`、`prefers-color-scheme`）将响应能力扩展到无障碍访问和主题配置。