# 常见断点

URL: https://caijiao.org/css/10-responsive/03-breakpoints
Source: docs/css/10-responsive/03-breakpoints.md
Description: 常见断点用于响应式设计中，帮助开发者为不同设备尺寸（如手机、平板、桌面）设置合适的样式。

响应式布局通常依赖媒体查询中的**断点（Breakpoints）**，即根据设备的屏幕宽度分区，分别为不同的设备设置样式。

## 1. 常见屏幕尺寸分类

| 设备类型         | 屏幕宽度范围   | 常用断点            |
| ---------------- | -------------- | ------------------- |
| 超小设备         | 小于 576px     | `max-width: 575px`  |
| 小型设备（手机） | 576px - 767px  | `min-width: 576px`  |
| 中型设备（平板） | 768px - 991px  | `min-width: 768px`  |
| 大型设备（桌面） | 992px - 1199px | `min-width: 992px`  |
| 超大设备         | 大于 1200px    | `min-width: 1200px` |

这些断点值并非固定标准，可以根据项目需求灵活调整。

## 2. 示例：断点样式应用

```css
/* 小屏幕设备样式 */
@media (max-width: 575px) {
  .container {
    padding: 10px;
  }
}

/* 中等及以上设备样式 */
@media (min-width: 768px) {
  .container {
    padding: 40px;
  }
}
```

## 3. 建议做法

- 使用 `min-width`：优先为小屏幕设置默认样式，再逐步增强（Mobile First）
- 保持断点数量精简，利于维护
- 使用 CSS 自定义变量统一管理断

## 常见断点示例

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