# VTY 响应式断点清单（前端落地版）

> 与 `PRD.md` 附录 A 一致 · 评审入口 [Demo](https://vty-responsive-prd.pages.dev/) 底部「断点清单」面板可对照当前宽度。

## 1. 主断点（布局态 · 必落地）

| 常量 | 值 | Media Query | `data-layout` | 壳层 |
|------|-----|-------------|---------------|------|
| `BP_H5_MAX` | **767** | `max-width: 767px` | `H5_LOCK` | App |
| `BP_TABLET_MAX` | **1023** | `768px – 1023px` | `TABLET` | App |
| `BP_PC_MIN` | **1024** | `min-width: 1024px` | 进入 PC | PC* |
| `BP_PC_NARROW_MAX` | **1279** | `1024px – 1279px` | `PC_NARROW` | PC* |
| `BP_PC_WIDE_MIN` | **1280** | `min-width: 1280px` | `PC_WIDE` | PC* |

\* **折叠设备** `data-device-form=foldable` 且 `w > 767` 时永远 `TABLET`（App 壳），不进 PC。

### 边界敏感点（±1px 必测）

| 边界 | 左 | 右 |
|------|----|----|
| 767 ↔ 768 | `H5_LOCK` | `TABLET` |
| 1023 ↔ 1024 | `TABLET` | `PC_NARROW`* |
| 1279 ↔ 1280 | `PC_NARROW` | `PC_WIDE` |

---

## 2. 次级断点 — PC 赛程卡片列数（仅 PC 壳）

| 视口 w | 列数 | CSS 参考 |
|--------|------|----------|
| **> 1399** | 5 | 默认 `repeat(5, 1fr)` |
| **1100 – 1399** | 4 | `max-width: 1399px` |
| **900 – 1099** | 3 | `max-width: 1099px` |
| **600 – 899** | 2 | `max-width: 899px` |
| **≤ 599** | 1 | `max-width: 599px` |

App 壳（平板 / 手机 / 折叠屏）**不使用上表**，统一 `.h5-live` 列表态。

---

## 3. 次级断点 — 折叠屏折态（仅 `foldable`）

| 常量 | 值 | `data-fold-posture` | 布局态 |
|------|-----|---------------------|--------|
| 外屏上限 | **w ≤ 767** | `cover` | `H5_LOCK` |
| 两折区间 | **768 – 1100** | `dual` | `TABLET` |
| 三折下限 | **w ≥ 1101** | `triple` | `TABLET` |

| 折态 | 主内容 max-width | 列表 |
|------|------------------|------|
| `dual` | **720px** 居中 | 单列 |
| `triple` | **920px** 居中 | 联赛块可双列（见下） |

| 规则 | 断点 | 行为 |
|------|------|------|
| 三折双列 → 单列 | **w ≤ 1200** 且 `triple` | `.h5-live-list` 改 1 列 |

---

## 4. 次级断点 — 组件显隐 / 布局切换

| 规则 | 断点 | 行为 | 选择器 / 备注 |
|------|------|------|----------------|
| Hero 并排 → 堆叠 | **w ≤ 1023** | Banner + 礼包上下排 | `.hero-row` |
| H5 四宫格 | **w ≤ 1023** 或 App 壳 | 显示 | `.h5-cats` |
| PC 卡片区 | **w ≥ 1024** 且 PC 壳 | 显示 | `.pc-only-sec` |
| H5 列表区 | App 壳 / **w ≤ 1023** | 显示 | `.h5-live` |
| 右侧浮条 | **w ≥ 1024** 且 PC 壳 | 显示 | `.float-bar` |
| 顶栏赞助 | **w ≥ 1280** 且 PC 壳 | 显示 | `.header .sponsor` |
| PC 窄图标轨 | **1024 – 1279** 且 PC 壳 | 侧栏 64px | `--sidebar-rail` |
| 滚球行窄屏 | **w ≤ 420** | 比赛行改单列 | `.live-row` |
| 鉴权双栏 Modal | **w ≥ 1024** 且 PC 壳 | 860px 双栏 | — |
| 鉴权整页 | **w ≤ 1023** 或 foldable | max 480px 单栏 | — |

---

## 5. 尺寸 Token

| Token | 值 | 用途 |
|-------|-----|------|
| `--sidebar-w` | 220px | PC 宽侧栏 |
| `--sidebar-rail` | 64px | PC 窄图标轨 |
| 抽屉宽 | min(280px, 86vw) | App 汉堡抽屉 |
| 三折抽屉 | min(300px, 86vw) | 折叠屏 |
| `--header-h` | 56px | 顶栏 |
| `--bottom-h` | 56px | H5 底栏 |
| `--float-w` | 56px | PC 右浮条 |
| 鉴权 Modal | max 860px | PC 双栏 |
| 输入热区 | min 44px 高 | 手机触控 |

---

## 6. JS 常量（可直接拷贝）

```javascript
export const BP = {
  H5_MAX: 767,
  TABLET_MAX: 1023,
  PC_MIN: 1024,
  PC_NARROW_MAX: 1279,
  PC_WIDE_MIN: 1280,
  // 次级
  GRID_5: 1399,
  GRID_4: 1099,
  GRID_3: 899,
  GRID_2: 599,
  FOLD_DUAL_MAX: 1100,
  FOLD_TRIPLE_MIN: 1101,
  HERO_STACK: 1023,
  LIVE_ROW_NARROW: 420,
  TRIPLE_LIST_2COL: 1200,
}

export function layoutOf(w, isFoldable) {
  if (isFoldable && w > BP.H5_MAX) return 'TABLET'
  if (w <= BP.H5_MAX) return 'H5_LOCK'
  if (w <= BP.TABLET_MAX) return 'TABLET'
  if (w <= BP.PC_NARROW_MAX) return 'PC_NARROW'
  return 'PC_WIDE'
}

export function pcGridCols(w) {
  if (w > 1399) return 5
  if (w >= 1100) return 4
  if (w >= 900) return 3
  if (w >= 600) return 2
  return 1
}

export function foldPosture(w) {
  if (w <= 767) return 'cover'
  if (w <= 1100) return 'dual'
  return 'triple'
}
```

---

## 7. Demo 预设宽度（Playwright / 手测）

| 预设 | w | 非折叠期望 | 开折叠模拟 |
|------|---|------------|------------|
| 小屏 | 320 / 375 / 414 | `H5_LOCK` | 同左 |
| 手机界 | 767 | `H5_LOCK` | `cover` |
| 平板起 | 768 | `TABLET` | `dual` |
| 平板 | 900 / 1023 | `TABLET` | `dual` |
| PC 起 | 1024 | `PC_NARROW` | **`TABLET`/`dual`** |
| PC 窄 | 1100 / 1279 | `PC_NARROW` | `TABLET` |
| PC 宽 | 1280 / 1440 | `PC_WIDE` | **`TABLET`/`triple`** |
| 卡片 4 列界 | 1399 | PC 4 列 | — |
| 卡片 5 列 | 1440+ | PC 5 列 | — |
| 折叠外屏 | 504 | `H5_LOCK` | `cover` |
| 折叠两折 | 1024 | `PC_NARROW` | **`TABLET`/`dual`** |
| 折叠三折 | 1592 | `PC_WIDE` | **`TABLET`/`triple`** |
| 滚球窄行 | 420 | 行内单列 | 同左 |

---

## 8. DOM 断言

```html
<html
  data-layout="H5_LOCK|TABLET|PC_NARROW|PC_WIDE"
  data-device-form="foldable"
  data-fold-posture="cover|dual|triple"
>
```