How to land responsive design
Responsive design is not letting a layout auto-squash. It is swapping in a different structure at specific widths. What to swap and how is a design decision, not a technical one.
What you'll run into
- 手机上要左右拖着看表格，还得放大才点得中
- 桌面端的侧边栏在手机上变成了顶部一长条
- 让 AI 加响应式，它只是把多列堆成一列，导航没管
How many breakpoints
| 档位 | 宽度 | 这一档的布局特征 |
|---|---|---|
| 手机 | < 768px | 单列，底部标签导航，卡片代替表格 |
| 平板 | 768–1024px | 两列，侧边栏可折叠，表格保留但减少列数 |
| 桌面 | > 1024px | 多列，侧边栏常驻，完整表格 |
Pick your main battlefield first. If 90% of users are on desktop, build desktop well and ship a "good enough" mobile version — and vice versa. Trying to make both ends equally good usually leaves both awkward.
What changes at the breakpoint
| 元素 | 在手机上换成什么 |
|---|---|
| 表格 | 变卡片。一行变一张卡，只显示最关键的两三个字段，其余折叠 |
| 侧边导航 | 变底部标签栏，最多五项，超出的收进「我的」 |
| 多列布局 | 堆成单列，但要重新排优先级，不是原样从左到右堆 |
| 列表加详情同屏 | 拆成两个页面，详情页要有返回 |
| 悬停才显示的内容 | 改成常驻显示或长按。手机没有 hover |
| 批量操作 | 长按进多选，或者干脆不做，留给桌面端 |
- Size tap targets to fingers. No matter how small the icon looks, the tappable area should reach about 44px.
- Don't scale font sizes proportionally. Body text on mobile should actually be slightly larger than desktop — the screen is smaller but closer to the face.
- Match the keyboard. Phone fields pull up a numeric keypad; email fields one with an @. Zero cost, yet many products skip it.
- Look at it on a real device. Dragging the browser narrow is not the same as a real device — safe areas, the address bar, and keyboard occlusion only show up on actual hardware.
A note for AI
PROMPT · responsive
把这个页面做成响应式，断点：768px / 1024px。 不要只是把多列堆成单列。请对每一类元素明确说明变化： - 表格 → 手机上变成卡片，列出保留哪几个字段、 哪个字段做主视觉、其余怎么处理 - 侧边导航 → 底部标签栏，说明保留哪四项、其余去哪 - 多列布局 → 堆叠后的顺序按重要性重排，说明新顺序 - 依赖 hover 的交互 → 改成什么 - 批量操作 → 保留还是移除 其他要求： - 可点区域不小于 44px - 手机端正文字号不小于桌面端 - 输入框按内容类型指定 inputmode / type 先给出上面每一项的方案，我确认后再改代码。