响应式怎么落
响应式不是让布局自动压扁，是在特定宽度上换一套结构。换什么、怎么换，是设计决定，不是技术问题。
你会遇到的现象
- 手机上要左右拖着看表格，还得放大才点得中
- 桌面端的侧边栏在手机上变成了顶部一长条
- 让 AI 加响应式，它只是把多列堆成一列，导航没管
断点定几个
| 档位 | 宽度 | 这一档的布局特征 |
|---|---|---|
| 手机 | < 768px | 单列，底部标签导航，卡片代替表格 |
| 平板 | 768–1024px | 两列，侧边栏可折叠，表格保留但减少列数 |
| 桌面 | > 1024px | 多列，侧边栏常驻，完整表格 |
先定主战场。如果九成用户在桌面端，就先把桌面端做好，手机端做够用版本；反过来同理。两端都想做到一样好，通常两端都别扭。
断点处变什么
| 元素 | 在手机上换成什么 |
|---|---|
| 表格 | 变卡片。一行变一张卡，只显示最关键的两三个字段，其余折叠 |
| 侧边导航 | 变底部标签栏，最多五项，超出的收进「我的」 |
| 多列布局 | 堆成单列，但要重新排优先级，不是原样从左到右堆 |
| 列表加详情同屏 | 拆成两个页面，详情页要有返回 |
| 悬停才显示的内容 | 改成常驻显示或长按。手机没有 hover |
| 批量操作 | 长按进多选，或者干脆不做，留给桌面端 |
- 点击区域按手指算。视觉上再小的图标，可点区域也要撑到 44px 左右。
- 字号不要等比缩放。手机上正文反而要比桌面稍大，因为屏幕小但距离近。
- 调对键盘。手机号弹数字键盘，邮箱弹带 @ 的。零成本但很多产品没做。
- 用真机看一遍。浏览器拖窄跟真机不是一回事，安全区域、地址栏、输入法遮挡都只有真机上才暴露。
给 AI 的话
PROMPT · 响应式
把这个页面做成响应式，断点：768px / 1024px。 不要只是把多列堆成单列。请对每一类元素明确说明变化： - 表格 → 手机上变成卡片，列出保留哪几个字段、 哪个字段做主视觉、其余怎么处理 - 侧边导航 → 底部标签栏，说明保留哪四项、其余去哪 - 多列布局 → 堆叠后的顺序按重要性重排，说明新顺序 - 依赖 hover 的交互 → 改成什么 - 批量操作 → 保留还是移除 其他要求： - 可点区域不小于 44px - 手机端正文字号不小于桌面端 - 输入框按内容类型指定 inputmode / type 先给出上面每一项的方案，我确认后再改代码。