响应式怎么落 | 设计界面 | 做产品

响应式怎么落

响应式不是让布局自动压扁，是在特定宽度上换一套结构。换什么、怎么换，是设计决定，不是技术问题。

你会遇到的现象

• 手机上要左右拖着看表格，还得放大才点得中

• 桌面端的侧边栏在手机上变成了顶部一长条

• 让 AI 加响应式，它只是把多列堆成一列，导航没管

断点定几个

档位宽度这一档的布局特征 手机< 768px单列，底部标签导航，卡片代替表格 平板768–1024px两列，侧边栏可折叠，表格保留但减少列数 桌面> 1024px多列，侧边栏常驻，完整表格

三档就够。断点不用记标准值，真正的判断是「内容在这个宽度下是不是开始难看了」——把浏览器慢慢拖窄，第一次觉得别扭的地方就是断点。

先定主战场。如果九成用户在桌面端，就先把桌面端做好，手机端做够用版本；反过来同理。两端都想做到一样好，通常两端都别扭。

断点处变什么

元素在手机上换成什么 表格变卡片。一行变一张卡，只显示最关键的两三个字段，其余折叠 侧边导航变底部标签栏，最多五项，超出的收进「我的」 多列布局堆成单列，但要重新排优先级，不是原样从左到右堆 列表加详情同屏拆成两个页面，详情页要有返回 悬停才显示的内容改成常驻显示或长按。手机没有 hover 批量操作长按进多选，或者干脆不做，留给桌面端

第三行是最容易糊弄过去的。桌面上「主内容在左、辅助信息在右」，堆成单列后辅助信息跑到了主内容下面还好；如果堆成辅助在上，用户要滚过一屏才看到重点。

• **点击区域按手指算。**视觉上再小的图标，可点区域也要撑到 44px 左右。

• **字号不要等比缩放。**手机上正文反而要比桌面稍大，因为屏幕小但距离近。

• **调对键盘。**手机号弹数字键盘，邮箱弹带 @ 的。零成本但很多产品没做。

• **用真机看一遍。**浏览器拖窄跟真机不是一回事，安全区域、地址栏、输入法遮挡都只有真机上才暴露。

最容易糊弄过去的一步：多列布局堆成单列

桌面

主内容

辅助

原样从左到右堆

辅助

主内容

按重要性重排

主内容

辅助

用户要滚过一屏才看到重点 打开就是重点

响应式不是让布局自动压扁，是在特定宽度上换一套结构——换什么、怎么换，是设计决定，不是技术问题。 断点也不用记标准值：把浏览器慢慢拖窄，第一次觉得别扭的地方就是断点。

还有几条零成本但常被跳过的：可点区域按手指算（视觉上再小的图标也要撑到 44px）、手机正文比桌面稍大（屏幕小但距离近）、调对键盘（手机号弹数字键盘）。最后一定要用真机看一遍——安全区域、地址栏、输入法遮挡，只有真机上才暴露。

给 AI 的话

复制 PROMPT · 响应式

把这个页面做成响应式，断点：768px / 1024px。

不要只是把多列堆成单列。请对每一类元素明确说明变化：
- 表格 → 手机上变成卡片，列出保留哪几个字段、
 哪个字段做主视觉、其余怎么处理
- 侧边导航 → 底部标签栏，说明保留哪四项、其余去哪
- 多列布局 → 堆叠后的顺序按重要性重排，说明新顺序
- 依赖 hover 的交互 → 改成什么
- 批量操作 → 保留还是移除

其他要求：
- 可点区域不小于 44px
- 手机端正文字号不小于桌面端
- 输入框按内容类型指定 inputmode / type

先给出上面每一项的方案，我确认后再改代码。

接着看

网页与移动端的差别 两端的五个硬差别，以及导航从桌面到手机的完整映射表。

先定组件后拼页 响应式最好做在组件里。组件自己会变，页面就不用到处写断点。

一屏一件事 堆成单列时的排序依据。哪个是主任务，它就该在最上面。