48 lines
1.4 KiB
Plaintext
48 lines
1.4 KiB
Plaintext
---
|
||
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` — 完整响应式规范与示例
|