sxc-frontend/web/DEVICE_OPTIMIZATION.md

1080x1920 设备优化说明

优化目标

针对 1080x1920 分辨率设备（如平板电脑、大屏手机）进行界面适配优化。

实施方案

1. CSS 变量系统（base.css）

在 :root 中定义响应式设计变量：

• --base-font-size: 基础字体大小（18px）
• --title-font-size: 标题字体（2rem）
• --body-font-size: 正文字体（1.125rem）
• --small-font-size: 小字体（1rem）
• --spacing-unit: 间距单位（1.25rem）
• --border-radius: 圆角半径（1.5rem）
• --min-touch-target: 最小触摸目标（44px）

2. 媒体查询断点

@media screen and (min-width: 751px) and (max-width: 1200px) and (min-height: 1800px)

3. 优化内容

3.1 字体和排版

• 标题文字：2rem（约32px），加粗
• 正文字体：1.125rem（约18px）
• 小字体：1rem（约16px）
• 行高：1.75（增强可读性）

3.2 输入框（SsInputBox.vue）

• 高度：增大至 1.75rem padding
• 圆角：使用 CSS 变量 --border-radius
• 按钮：最小尺寸 44px × 44px
• 阴影：增强至 0.5rem

3.3 常见问题（SsCommonProblem.vue）

• 最小高度：20rem
• 标题：1.5rem
• 列表项：1rem，行高 1.5em
• 图标：3rem × 3rem
• 间距：增大至 3rem

3.4 服务导航（SsService.vue）

• 卡片高度：9rem
• 标题：1.125rem
• 中心卡片：14rem × 14rem
• 图标：增大至 7rem × 7rem
• 阴影：增强视觉层次

3.5 布局结构（HomeView.vue）

• 垂直布局：服务导航在上（100%宽度），常见问题在下
• 间距：统一增大至 2rem
• 内边距：5rem 顶部，3rem 底部

3.6 其他组件

• SsGridEntrance: 增大 padding 和字体
• SsPanel: 标题 1.25rem
• SsHeader: Logo 2.5rem，文字 1.25rem
• SsHeadline: 增大间距

4. 触摸优化

所有可点击元素最小尺寸：44px × 44px

• 按钮
• 卡片
• 列表项
• 图标

5. 视觉增强

• 阴影：从 0.25rem 增强至 0.5rem
• 圆角：统一使用 CSS 变量
• 间距：使用 --spacing-unit 倍数
• 对比度：保持原有配色，增大元素尺寸

设计原则

1. 渐进增强：基于现有桌面端设计，不破坏原有布局
2. CSS 变量：使用变量系统，便于维护和调整
3. 响应式断点：清晰的媒体查询边界（桌面 > 1080x1920 > 移动）
4. 触摸友好：所有交互元素符合 44px 最小尺寸标准
5. 可读性优先：增大字体、行高和间距

测试建议

1. 在 1080x1920 设备或模拟器中测试
2. 验证所有交互元素可点击性
3. 检查文字可读性
4. 确认布局不会溢出或重叠
5. 测试垂直滚动流畅性

兼容性

• 不影响现有桌面端布局（>1200px）
• 不影响移动端布局（<750px）
• 仅在目标设备范围内生效