---
title: "Responsive Breakpoints"
type: concept
tags: [css, responsive, mobile-first, breakpoints]
sources: [design-ux-architect.md]
last_updated: 2026-04-24
---

## Definition

Responsive Breakpoints 是移动优先的响应式设计断点策略，通过 CSS Media Queries 在不同视口宽度下提供差异化的布局和样式。

## Breakpoint Strategy

- **Mobile First**：基础样式针对 320px+ 设计
- **Tablet**：768px+ 增强
- **Desktop**：1024px+ 完整功能
- **Large**：1280px+ 优化

## Implementation

```css
/* Base: Mobile (320px+) */

/* Tablet (768px+) */
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
  .grid-2-col {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
  .grid-2-col {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

/* Large (1280px+) */
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
```

## Related Concepts

- [[Layout-Framework]]：基于断点策略的布局组件系统
- [[CSS-Design-System]]：提供 spacing token 支持响应式间距

## Sources

- [[design-ux-architect]] — Responsive Breakpoints 的完整定义