# 响应式设计快速教程

## 一、@media 媒体查询

### 基本语法
```css
@media (条件) {
  /* 当条件满足时应用的样式 */
}
```

### 常用断点（屏幕宽度）
```css
/* 移动端 */
@media (max-width: 767px) { }  /* 小于等于 767px */

/* 平板 */
@media (min-width: 768px) and (max-width: 1023px) { }  /* 768px 到 1023px */

/* 桌面 */
@media (min-width: 1024px) { }  /* 大于等于 1024px */
```

### 如何选择断点值？
- **767px**：常见手机最大宽度
- **768px**：常见平板最小宽度
- **1024px**：常见桌面最小宽度

**技巧**：打开浏览器开发者工具，调整窗口大小，观察你的设计在哪个宽度开始变形，那就是你的断点。

---

## 二、clamp() 函数

### 基本语法
```css
clamp(最小值, 理想值, 最大值)
```

### 工作原理
浏览器会：
1. 如果 `理想值` < `最小值` → 使用 `最小值`
2. 如果 `理想值` > `最大值` → 使用 `最大值`
3. 否则 → 使用 `理想值`

### 如何计算数值？

#### 示例 1：字体大小
```css
font-size: clamp(0.875rem, 1.5vw, 1rem);
```
- **最小值 0.875rem**：小屏幕时字体不会太小（约 14px）
- **理想值 1.5vw**：随视口宽度变化（视口宽度 × 1.5%）
- **最大值 1rem**：大屏幕时字体不会太大（约 16px）

**计算思路**：
- 先确定最小和最大值（固定值）
- 中间用 `vw`（视口宽度百分比）让它在中间自适应

#### 示例 2：内边距
```css
padding: clamp(0.5rem, 1.5vw, 1rem);
```
- **最小值 0.5rem**：小屏幕时内边距 8px
- **理想值 1.5vw**：随屏幕宽度变化
- **最大值 1rem**：大屏幕时内边距 16px

#### 示例 3：宽度
```css
width: clamp(250px, 30%, 400px);
```
- **最小值 250px**：最小宽度 250px
- **理想值 30%**：占父容器 30%
- **最大值 400px**：最大宽度 400px

### 快速计算法

**步骤 1：确定最小值和最大值**
- 打开浏览器，调整到最小窗口，看元素是否还能正常显示 → 这是最小值
- 调整到最大窗口，看元素是否过大 → 这是最大值

**步骤 2：确定中间值**
- 使用 `vw`（视口宽度百分比）
- 公式：`理想值 = (最大值 - 最小值) / 2` 对应的 vw
- 或者直接用 `2vw`、`1.5vw` 等常见值测试

**步骤 3：测试调整**
- 在浏览器中调整窗口大小，观察效果
- 如果小屏幕时太小 → 增大最小值
- 如果大屏幕时太大 → 减小最大值
- 如果中间过渡不自然 → 调整中间 vw 值

---

## 三、实际应用示例

### 完整示例
```css
.container {
  /* 容器内边距：小屏 12px，大屏 24px，中间自适应 */
  padding: clamp(0.75rem, 2vw, 1.5rem);
  
  /* 标题字体：小屏 16px，大屏 28px，中间自适应 */
  font-size: clamp(1rem, 2.5vw, 1.75rem);
}

/* 移动端特殊处理 */
@media (max-width: 767px) {
  .container {
    padding: 1rem;  /* 移动端固定值 */
  }
}
```

### 常用数值参考

| 属性 | 最小值 | 中间值 | 最大值 | 说明 |
|------|--------|--------|--------|------|
| 字体 | `0.875rem` | `1.5vw` | `1rem` | 正文 |
| 字体 | `1rem` | `2.5vw` | `1.8rem` | 标题 |
| 内边距 | `0.5rem` | `1.5vw` | `1rem` | 小元素 |
| 内边距 | `0.75rem` | `2vw` | `1.5rem` | 容器 |
| 圆角 | `4px` | `1vw` | `8px` | 按钮 |
| 间距 | `0.5rem` | `1.5vw` | `1rem` | gap/margin |

---

## 四、调试技巧

1. **打开浏览器开发者工具**（F12）
2. **切换到响应式设计模式**（Ctrl+Shift+M）
3. **调整窗口大小**，观察元素变化
4. **修改 CSS 值**，实时查看效果
5. **测试不同设备尺寸**（手机、平板、桌面）

---

## 五、总结

1. **@media**：用于不同屏幕尺寸的样式切换
   - `max-width`：小于等于某值
   - `min-width`：大于等于某值

2. **clamp()**：让数值在最小和最大之间自适应
   - 格式：`clamp(最小, 理想, 最大)`
   - 理想值用 `vw` 实现自适应

3. **工作流程**：
   - 先用 `clamp()` 实现基础自适应
   - 再用 `@media` 处理特殊情况（如移动端布局变化）

