---
appliesTo:
  - frontend
  - web
  - h5
priority: 50
---

# 前端通用规范

## 响应式设计

- **移动端优先**：设计从移动端断点开始，逐步增强到桌面端。
- **断点标准**：
  - Mobile: < 768px
  - Tablet: 768px - 1024px
  - Desktop: > 1024px
- **弹性布局**：优先使用 Flexbox / Grid，避免固定像素宽度。

## 无障碍（a11y）

- **语义化标签**：使用 `<header>`、`<nav>`、`<main>`、`<footer>` 等语义标签。
- **表单关联**：`<label>` 必须通过 `for` 或嵌套关联到 `<input>`。
- **焦点管理**：所有可交互元素必须有可见的焦点样式。
- **ARIA**：复杂组件（如 Tabs、Modal）使用正确的 ARIA 角色和属性。
- **颜色对比**：文本与背景对比度 ≥ 4.5:1（WCAG AA）。

## 国际化（i18n）

- **文本外置**：所有用户可见文本使用 i18n  key，禁止硬编码中文/英文。
- **日期/数字**：使用 `Intl.DateTimeFormat`、`Intl.NumberFormat` 本地化。
- **RTL**：布局支持从右到左（阿拉伯语、希伯来语）。

## 性能

- **图片优化**：使用 WebP/AVIF，提供响应式图片 `srcset`。
- **代码分割**：路由级懒加载，组件级按需加载。
- **资源缓存**：静态资源使用长期缓存（hash 文件名）。