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