Auto-sync: 2026-04-20 07:08

wiki/concepts/响应式断点策略.md

@@ -0,0 +1,30 @@
+---
+title: "响应式断点策略"
+type: concept
+tags: [UX, 响应式设计, 移动优先]
+---
+
+## 定义
+基于移动优先（Mobile First）的响应式设计方法论，通过定义多个屏幕宽度断点实现跨设备一致体验。
+
+## 断点标准
+- **Mobile**: 320px+（基础设计）
+- **Tablet**: 768px+
+- **Desktop**: 1024px+
+- **Large**: 1280px+
+
+## 核心原则
+1. 从小屏幕开始设计，逐步增强
+2. 使用 min-width 而非 max-width 媒体查询
+3. 确保触摸目标和内容可读性
+4. 考虑横屏和竖屏适配
+
+## 布局模式
+- **Hero Section**: 全视口高度，垂直居中
+- **Content Grid**: 桌面端双列，移动端单列
+- **Card Layout**: CSS Grid auto-fit，最小 300px 卡片
+- **Sidebar Layout**: 2fr 主内容 + 1fr 侧边栏
+
+## 相关概念
+- [[CSS 设计系统]]
+- [[组件架构]]