HTML 响应式布局断点设计指南
1. 简介
在网页设计中，由于设备屏幕尺寸不同，布局往往是不一样的。一种思路是，PC 端一套页面，移动端一套页面，优点在于分开设计，细节能够做的更到位。另一种就是响应式设计，使用 CSS3 @media 媒体查询根据屏幕尺寸（临界值我们称之为「断点」）动态调整页面布局，一套代码同时适配多设备，维护起来更容易。今天我们看看常见框架的响应式断点是怎么设计的。
2. Bootstrap
Bootstrap 默认提供 6 个断点：
设备 | 类前缀 | 尺寸 |
|---|---|---|
X-Small（小屏 / 竖屏手机） | 无 | < 576px |
Small（宽屏 / 横屏手机） |
| ≥ 576px |
Medium（平板） |
| ≥ 768px |
Large（电脑） |
| ≥ 992px |
Extra large（大屏电脑） |
| ≥ 1200px |
Extra extra large（超大屏电脑） |
| ≥ 1400px |
3. Semantic UI
Semantic UI 默认提供 4 个断点：
设备 | 类前缀 | 尺寸 |
|---|---|---|
Mobile（手机） |
| < 768px |
Tablet（平板） |
| ≥ 768px |
Large screen（笔记本） |
| ≥ 992px |
Wide screen（台式电脑） |
| > 1200px |
4. Tailwindcss
Tailwindcss 默认提供 6 个断点：
设备 | 类前缀 | 尺寸 |
|---|---|---|
X-Small（小屏 / 竖屏手机） | 无 | < 640px |
Small（宽屏 / 横屏手机） |
| ≥ 640px |
Medium（平板） |
| ≥ 768px |
Large（电脑） |
| ≥ 1024px |
Extra large（大屏电脑） |
| ≥ 1280px |
Extra extra large（超大屏电脑） |
| ≥ 1536px |
5. 总结
断点多了在布局上反而会更复杂，个人在实际项目中更倾向于 Semantic UI 的设计方式，简单明了。
很多响应式框架都是移动设备优先的，默认就是 xs，不需要单独指明。然后根据需要，针对其他尺寸的屏幕添加相应的类前缀，进行响应式布局设计。
一个参考设计如下：
设备 | 类前缀 | 尺寸 |
|---|---|---|
Mobile（手机） | 无 | < 768px |
Tablet（平板） |
| ≥ 768px |
Laptop（笔记本电脑） |
| ≥ 992px |
Desktop（桌面电脑） |
| > 1200px |
