📱 响应式设计
响应式设计原则
💡 Mobile First
先设计移动端，再逐步增强到桌面端。
- ✅ 流式网格布局
- ✅ 弹性图片
- ✅ 媒体查询
- ✅ 弹性字体
断点设置
| 设备 | 断点 | CSS |
|---|---|---|
| 手机 | < 640px | 默认样式 |
| 平板 | ≥ 640px | @media (min-width: 640px) |
| 桌面 | ≥ 1024px | @media (min-width: 1024px) |
| 大桌面 | ≥ 1280px | @media (min-width: 1280px) |
| 超大屏 | ≥ 1536px | @media (min-width: 1536px) |
响应式技巧
1. 弹性布局
/* 使用 flexbox 自适应 */
.container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0f172a;
--bg-white: #1e293b;
--text: #f1f5f9;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--border: #334155;--primary-bg: rgba(37, 99, 235, 0.2);
--accent-bg: rgba(8, 145, 178, 0.2);
--secondary-bg: rgba(139, 92, 246, 0.2);
--success-bg: rgba(22, 163, 74, 0.2);
--warning-bg: rgba(217, 119, 6, 0.2);
--danger-bg: rgba(220, 38, 38, 0.2);
}
aside { background: rgba(30, 41, 59, 0.95); border-right-color: var(--border); }
.page-header { background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%); }
.table-subsection, table, .code-block { background: rgba(30, 41, 59, 0.95); border-color: var(--border); }
tbody tr:hover { background: rgba(37, 99, 235, 0.2); }
.example-box { background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(37, 99, 235, 0.15) 100%); }
.note-box { background: linear-gradient(135deg, rgba(217, 119, 6, 0.1) 0%, rgba(217, 119, 6, 0.15) 100%); }
.tip-box { background: linear-gradient(135deg, rgba(22, 163, 74, 0.1) 0%, rgba(22, 163, 74, 0.15) 100%); }
.warning-box { background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(220, 38, 38, 0.15) 100%); }
.stat-card, .card { background: rgba(30, 41, 59, 0.95); border-color: var(--border); }
main { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); }
}
.item {
flex: 1 1 300px; /* 最小 300px，自动伸缩 */
}
2. 响应式图片
<!-- srcset 根据屏幕宽度选择 -->
<img
src="image-800.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
alt="描述"
/>
3. 容器查询
/* 根据容器大小而非视口调整 */
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
flex-direction: row;
}
}
移动端优化
- ✅ 触摸友好：按钮至少 44x44px
- ✅ 字体大小：正文至少 16px
- ✅ 视口设置：<meta name="viewport">
- ✅ 避免悬停：移动端无 hover
- ✅ 汉堡菜单：小屏隐藏导航
- ✅ 手势支持：滑动、捏合
测试工具
| 工具 | 用途 |
|---|---|
| Chrome DevTools | 设备模拟器 |
| BrowserStack | 真机测试 |
| Responsively App | 多设备同时预览 |
| 真实设备 | 最终验证 |