# 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. 媒体查询断点
```css
@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）
- 仅在目标设备范围内生效