rjl
18e3f6f7f2
- 新增大屏开发调试指南文档，包含设计基准、调试方法和字体配置说明 - 添加字体大小预览工具，支持多分辨率视口切换（2048x1080/1920x1080/3840x2160） - 新增字体资源 README 文档和团队标题背景图片 - 优化用户界面背景图片（title-bg3.png、title-bg4.png） - 更新 ActionButton 和 CompetitionLayout 组件样式 - 完善用户模块各页面布局（分析、封面、抽签、游戏、规则、团队） - 优化题目渲染器组件和成绩详情页面 - 更新 UnoCSS 配置以支持大屏字体缩放方案
111 lines
3.0 KiB
Markdown
111 lines
3.0 KiB
Markdown
# 大屏开发调试指南
|
||
|
||
## 项目配置
|
||
|
||
- **设计基准**: 2048 x 1080
|
||
- **缩放方案**: VScaleScreen
|
||
- **目标设备**: 超级大屏（投屏显示）
|
||
|
||
## 开发调试方法
|
||
|
||
### 方法 1: Chrome DevTools 自定义设备（推荐）
|
||
|
||
1. 打开 Chrome DevTools (F12)
|
||
2. 点击设备模拟按钮 (Ctrl/Cmd + Shift + M)
|
||
3. 在设备下拉菜单中选择 "Edit..."
|
||
4. 添加自定义设备：
|
||
- Device Name: `Large Screen 2048x1080`
|
||
- Width: `2048`
|
||
- Height: `1080`
|
||
- Device pixel ratio: `1`
|
||
- User agent string: (保持默认)
|
||
5. 选择刚创建的设备进行调试
|
||
|
||
### 方法 2: 浏览器窗口缩放
|
||
|
||
1. 将浏览器窗口调整为合适大小
|
||
2. 使用浏览器缩放功能 (Ctrl/Cmd + 鼠标滚轮)
|
||
3. 调整到能看到完整布局的比例
|
||
|
||
### 方法 3: 响应式设计模式
|
||
|
||
在 DevTools 中：
|
||
1. 选择 "Responsive" 模式
|
||
2. 手动输入宽度: `2048`
|
||
3. 手动输入高度: `1080`
|
||
|
||
## 字体大小说明
|
||
|
||
当前字体配置已针对 2048x1080 优化：
|
||
|
||
| Class | 实际大小 | 适用场景 |
|
||
|-------|---------|---------|
|
||
| `text-xs` | 12.8px | 辅助文字、标注 |
|
||
| `text-sm` | 15.2px | 次要文字 |
|
||
| `text-base` | 17.6px | 正文 |
|
||
| `text-lg` | 20.8px | 小标题 |
|
||
| `text-xl` | 24px | 中标题 |
|
||
| `text-2xl` | 28px | 大标题 |
|
||
| `text-3xl` | 33.6px | 特大标题 |
|
||
| `text-4xl` | 40px | 主标题 |
|
||
| `text-5xl` | 51.2px | 超大标题 |
|
||
| `text-6xl` | 64px | 巨大标题 |
|
||
|
||
## VScaleScreen 工作原理
|
||
|
||
```
|
||
设计基准 (2048x1080)
|
||
↓
|
||
VScaleScreen 自动缩放
|
||
↓
|
||
实际显示设备 (任意分辨率)
|
||
```
|
||
|
||
**示例：**
|
||
- 在 1920x1080 屏幕上：内容会略微缩小
|
||
- 在 3840x2160 (4K) 屏幕上：内容会放大约 2 倍
|
||
- 在更大的 LED 屏上：内容会等比例放大
|
||
|
||
## 常见问题
|
||
|
||
### Q: 在我的电脑上字体看起来太大了？
|
||
A: 这是正常的！因为你的设计基准 (2048x1080) 比普通电脑屏幕大。请使用上述方法在正确的分辨率下调试。
|
||
|
||
### Q: 如何确认实际大屏的分辨率？
|
||
A:
|
||
1. 询问现场技术人员
|
||
2. 常见大屏分辨率：
|
||
- 1920x1080 (Full HD)
|
||
- 2560x1440 (2K)
|
||
- 3840x2160 (4K)
|
||
- 7680x4320 (8K)
|
||
|
||
### Q: 需要修改 VScaleScreen 的尺寸吗？
|
||
A: 通常不需要。保持 2048x1080 即可，VScaleScreen 会自动适配。除非：
|
||
- 实际大屏比例不是 16:9
|
||
- 需要针对特定分辨率优化
|
||
|
||
### Q: 如何微调字体大小？
|
||
A: 修改 `uno.config.ts` 中的 `fontSize` 配置，然后重启开发服务器。
|
||
|
||
## 测试清单
|
||
|
||
部署前请确认：
|
||
|
||
- [ ] 在 2048x1080 分辨率下所有文字清晰可读
|
||
- [ ] 所有布局元素位置正确
|
||
- [ ] 动画效果流畅
|
||
- [ ] 图片清晰不模糊（建议使用 2x 或 3x 分辨率的图片）
|
||
- [ ] 在实际大屏上测试（如果可能）
|
||
|
||
## 性能优化建议
|
||
|
||
1. **图片资源**: 使用 WebP 格式，准备高分辨率版本
|
||
2. **字体**: 使用 Web Font，确保在大屏上渲染清晰
|
||
3. **动画**: 使用 CSS transform 和 opacity，避免触发重排
|
||
4. **测试**: 在接近实际大屏的设备上测试性能
|
||
|
||
## 联系与支持
|
||
|
||
如有问题，请联系开发团队。
|