---
description: "响应式与多端适配规范 — 断点策略/触摸优化/设备测试矩阵。管理端含 Element Plus 适配，用户端纯 Tailwind + Headless UI"
globs:
  - "**/*.vue"
  - "**/*.css"
  - "**/*.scss"
alwaysApply: false
---

# 📱 Responsive Design & Multi-Device Standards (Core)

## 设计原则

- Mobile First：先实现手机，再逐级增强到平板/桌面
- 内容优先：保证主流程在小屏可达、可读、可操作
- 组件一致：Tailwind 断点策略统一（管理端同时适配 Element Plus 组件）

## 断点最小约定

- `base`：手机竖屏
- `sm/md`：手机横屏与平板
- `lg/xl/2xl`：桌面与大屏
- 禁止桌面优先 `max-*` 反推写法作为默认策略

## 布局与交互约束

- 列表/卡片/表单在窄屏自动降级布局
- 触摸目标建议 ≥ 44x44
- 弹层与抽屉优先适配移动端交互
- 文本与关键按钮不得被遮挡或截断

## 测试基线

- 至少验证 3 档视口：手机 / 平板 / 桌面
- 验证横竖屏切换、滚动容器、固定定位元素
- 关键路径（登录、检索、提交）全端可完成

## 验证清单

- [ ] 小屏主流程可完成
- [ ] 关键控件触摸可达
- [ ] 无明显布局溢出/重叠
- [ ] 核心页面通过多断点截图比对

## Tier 3 深度参考

- `.cursor/rules/references/018-responsive-deep.md` — 完整响应式规范与示例