响应式断点

响应式断点是按视口宽度划分的区间，用于让同一页面在手机、平板、桌面设备上应用不同布局。

本项目统一采用以下视口宽度区间定义设备类型。

断点定义

• 手机：width < 640px
• 平板：640px <= width < 1024px
• 桌面：1024px <= width

推荐写法

使用现代范围语法（Media Queries Level 4）：

@media (width < 640px) {
  /* 手机 */
}

@media (640px <= width < 1024px) {
  /* 平板 */
}

@media (width >= 1024px) {
  /* 桌面设备 */
}

兼容写法

如需兼容较旧语法，可使用等价写法：

@media not (min-width: 640px) {
  /* 手机 */
}

@media (min-width: 640px) and (not (min-width: 1024px)) {
  /* 平板 */
}

@media (min-width: 1024px) {
  /* 桌面设备 */
}

规范要求

• 新增页面样式时，应优先采用本规范中的断点区间。
• 组件如需使用非标准断点，应在对应样式旁标注原因。
• 除非有明确说明，文档与代码中的断点定义应与本页保持一致。