Update nexus wiki content

wiki/concepts/Responsive-Breakpoints.md

@@ -0,0 +1,61 @@
+---
+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 的完整定义