常见断点

响应式布局通常依赖媒体查询中的断点（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. 示例：断点样式应用

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

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

3. 建议做法

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

常见断点示例

loading