# 媒体查询语法

URL: https://caijiao.org/css/10-responsive/02-media-queries
Source: docs/css/10-responsive/02-media-queries.md
Description: CSS 媒体查询用于根据设备特性（如宽度、高度、方向等）应用不同的样式，实现响应式设计。

媒体查询（Media Queries）是响应式网页设计的核心工具，允许根据用户的设备条件（如屏幕宽度、方向等）定义不同的样式规则。

## 1. 基本语法

```css
@media 条件 {
  /* 仅当条件满足时才会应用的样式 */
}
```

### 示例：

```css
@media (max-width: 768px) {
  body {
    background-color: #f0f4c3;
  }
}
```

> 当浏览器宽度小于等于 768px 时，页面背景色会变为浅绿色。

## 2. 常见条件

| 条件          | 示例                       | 说明                     |
| ------------- | -------------------------- | ------------------------ |
| `max-width`   | `(max-width: 768px)`       | 最大宽度，小于等于时匹配 |
| `min-width`   | `(min-width: 1024px)`      | 最小宽度，大于等于时匹配 |
| `orientation` | `(orientation: landscape)` | 横屏或竖屏方向           |
| `max-height`  | `(max-height: 600px)`      | 最大高度                 |

## 3. 组合条件

可以使用 `and`、`,`（逗号）来组合多个条件：

```css
@media (min-width: 600px) and (max-width: 1200px) {
  .container {
    padding: 40px;
  }
}
```

## 媒体查询示例

[在线代码演示](/css/demos/28.html)