156 lines
4.5 KiB
Markdown
156 lines
4.5 KiB
Markdown
|
# 响应式设计说明
|
||
|
|
|
||
|
|
## 🎯 设计目标
|
||
|
|
|
||
|
|
网站现已实现完全的全屏占满和响应式设计，能够在各种设备上提供最佳的用户体验。
|
||
|
|
|
||
|
|
## 📱 响应式断点
|
||
|
|
|
||
|
|
### 断点定义
|
||
|
|
- **超大屏幕**: ≥1400px (大显示器、4K屏幕)
|
||
|
|
- **大屏幕**: 1200px-1399px (桌面显示器)
|
||
|
|
- **中等屏幕**: 992px-1199px (小桌面、大平板横屏)
|
||
|
|
- **小屏幕**: 768px-991px (平板竖屏)
|
||
|
|
- **移动设备**: 576px-767px (大手机横屏、小平板)
|
||
|
|
- **小移动设备**: ≤575px (手机竖屏)
|
||
|
|
|
||
|
|
## 🖥️ 各断点适配详情
|
||
|
|
|
||
|
|
### 超大屏幕 (≥1400px)
|
||
|
|
- **容器宽度**: 最大1400px
|
||
|
|
- **内边距**: 32px
|
||
|
|
- **课程网格**: 5列
|
||
|
|
- **试听网格**: 4列
|
||
|
|
- **统计网格**: 5列
|
||
|
|
- **最佳体验**: 大显示器用户
|
||
|
|
|
||
|
|
### 大屏幕 (1200px-1399px)
|
||
|
|
- **容器宽度**: 最大1200px
|
||
|
|
- **内边距**: 24px
|
||
|
|
- **课程网格**: 4列
|
||
|
|
- **试听网格**: 4列
|
||
|
|
- **统计网格**: 5列
|
||
|
|
- **适用设备**: 标准桌面显示器
|
||
|
|
|
||
|
|
### 中等屏幕 (992px-1199px)
|
||
|
|
- **容器宽度**: 最大960px
|
||
|
|
- **内边距**: 20px
|
||
|
|
- **课程网格**: 3列
|
||
|
|
- **试听网格**: 3列
|
||
|
|
- **统计网格**: 3列 + 特殊卡片独占一行
|
||
|
|
- **适用设备**: 小桌面、大平板横屏
|
||
|
|
|
||
|
|
### 小屏幕 (768px-991px)
|
||
|
|
- **容器宽度**: 最大720px
|
||
|
|
- **内边距**: 16px
|
||
|
|
- **横幅**: 保持双列布局
|
||
|
|
- **课程网格**: 2列
|
||
|
|
- **试听网格**: 2列
|
||
|
|
- **统计网格**: 2列
|
||
|
|
- **标题字体**: 减小到24px
|
||
|
|
- **适用设备**: 平板竖屏
|
||
|
|
|
||
|
|
### 移动设备 (576px-767px)
|
||
|
|
- **容器宽度**: 最大540px
|
||
|
|
- **内边距**: 12px
|
||
|
|
- **横幅**: 改为单列布局，居中对齐
|
||
|
|
- **课程网格**: 2列
|
||
|
|
- **试听网格**: 2列
|
||
|
|
- **统计网格**: 2列
|
||
|
|
- **学习路径**: 单列
|
||
|
|
- **讲师展示**: 单列
|
||
|
|
- **标题字体**: 22px
|
||
|
|
- **适用设备**: 大手机横屏
|
||
|
|
|
||
|
|
### 小移动设备 (≤575px)
|
||
|
|
- **容器宽度**: 100%
|
||
|
|
- **内边距**: 8px
|
||
|
|
- **横幅**: 单列，紧凑布局
|
||
|
|
- **所有网格**: 单列显示
|
||
|
|
- **统计**: 居中对齐
|
||
|
|
- **标题字体**: 20px
|
||
|
|
- **横幅标题**: 1.8rem
|
||
|
|
- **内容间距**: 减小到40px
|
||
|
|
- **适用设备**: 手机竖屏
|
||
|
|
|
||
|
|
## 🎨 布局特性
|
||
|
|
|
||
|
|
### 全屏占满
|
||
|
|
- **HTML/Body**: 100%高度和宽度
|
||
|
|
- **App容器**: 弹性布局，占满视口
|
||
|
|
- **防止横向滚动**: overflow-x: hidden
|
||
|
|
- **布局组件**: 弹性布局，头部和底部固定，内容区域自适应
|
||
|
|
|
||
|
|
### 网格系统
|
||
|
|
- **自适应网格**: 使用CSS Grid的auto-fit和minmax
|
||
|
|
- **最小宽度**: 每个卡片都有合理的最小宽度
|
||
|
|
- **自动换行**: 内容自动适应屏幕宽度
|
||
|
|
- **间距调整**: 不同屏幕尺寸使用不同的gap值
|
||
|
|
|
||
|
|
### 导航栏适配
|
||
|
|
- **大屏**: 完整导航菜单 + 搜索框 + 用户信息
|
||
|
|
- **中屏**: 隐藏部分菜单项，保留核心功能
|
||
|
|
- **小屏**: 隐藏导航菜单，缩小搜索框
|
||
|
|
- **手机**: 最小化布局，隐藏用户名显示
|
||
|
|
|
||
|
|
## 🔧 技术实现
|
||
|
|
|
||
|
|
### CSS Grid 响应式
|
||
|
|
```css
|
||
|
|
.courses-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
|
|
gap: 24px;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### 媒体查询策略
|
||
|
|
- **移动优先**: 基础样式适配小屏幕
|
||
|
|
- **渐进增强**: 大屏幕添加更多功能
|
||
|
|
- **断点覆盖**: 确保所有尺寸都有适配
|
||
|
|
|
||
|
|
### 弹性布局
|
||
|
|
- **Flexbox**: 用于组件内部对齐
|
||
|
|
- **Grid**: 用于整体布局和卡片网格
|
||
|
|
- **混合使用**: 根据需求选择最佳方案
|
||
|
|
|
||
|
|
## 📊 性能优化
|
||
|
|
|
||
|
|
### 图片适配
|
||
|
|
- **占位符**: 使用图标替代图片，减少加载时间
|
||
|
|
- **响应式图片**: 为不同屏幕准备不同尺寸
|
||
|
|
- **懒加载**: 可在后续添加图片懒加载
|
||
|
|
|
||
|
|
### 字体缩放
|
||
|
|
- **相对单位**: 使用rem和em确保可访问性
|
||
|
|
- **合理层级**: 不同屏幕使用合适的字体大小
|
||
|
|
- **行高调整**: 保持良好的阅读体验
|
||
|
|
|
||
|
|
## 🎯 用户体验
|
||
|
|
|
||
|
|
### 触摸友好
|
||
|
|
- **按钮大小**: 移动端按钮足够大，易于点击
|
||
|
|
- **间距合理**: 避免误触，提供舒适的操作空间
|
||
|
|
- **手势支持**: 为触摸设备优化交互
|
||
|
|
|
||
|
|
### 内容优先
|
||
|
|
- **重要信息**: 在小屏幕上优先显示核心内容
|
||
|
|
- **渐进披露**: 根据屏幕空间逐步展示更多信息
|
||
|
|
- **简化操作**: 移动端简化复杂操作流程
|
||
|
|
|
||
|
|
## 🚀 测试建议
|
||
|
|
|
||
|
|
### 设备测试
|
||
|
|
1. **桌面**: Chrome DevTools 各种尺寸
|
||
|
|
2. **平板**: iPad (768px) 和 iPad Pro (1024px)
|
||
|
|
3. **手机**: iPhone SE (375px) 到 iPhone Pro Max (428px)
|
||
|
|
4. **超宽屏**: 1440px+ 显示器
|
||
|
|
|
||
|
|
### 功能测试
|
||
|
|
- **导航**: 各尺寸下导航功能正常
|
||
|
|
- **搜索**: 搜索框在小屏幕下可用
|
||
|
|
- **卡片**: 内容卡片在各尺寸下显示完整
|
||
|
|
- **交互**: 按钮和链接在触摸设备上易用
|
||
|
|
|
||
|
|
现在网站已经完全实现了全屏占满和完整的响应式设计！🎉
|