nexus/wiki/concepts/Responsive-Breakpoints.md

title, type, tags, sources, last_updated

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

Definition

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

Breakpoint Strategy

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

Implementation

/* 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 的完整定义