62 lines
1.2 KiB
Markdown
62 lines
1.2 KiB
Markdown
---
|
||
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 的完整定义
|