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

title, type, tags

title	type	tags
响应式断点策略	concept	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 设计系统
• 组件架构