响应式设计
Responsive Design
初级通用响应式设计（Responsive Design）是让页面布局随可用空间变化而调整的设计方式。它解决同一页面在手机、平板和桌面浏览器上空间不同的问题，例如把桌面端并排的内容改成手机端上下排列。
你可能会说：「我想让这个后台页面在手机和电脑上都能用，别只把电脑版缩小。」
动手看看团队工作台的窄屏布局
拖动页面宽度：内容没有换一套，而是在可用空间变少时重新排列。这里用条件样式模拟响应式设计中的断点。
宽于 520px 时，导航留在标题右侧，快捷入口和进度区并排，充分利用横向空间。
要点响应式设计主要调整什么？
- 1
布局跟着可用空间变化
你做数据看板时，电脑上可以让筛选区和图表并排；屏幕变窄后，再把它们排成上下两段。因为可用宽度变了，所以内容的排列方式也要跟着变，而不是等比例缩小整个页面。
- 2
内容要在窄屏里仍能使用
布局换了位置，还要看实际操作是否顺手。比如导航收进菜单后，用户还能不能找到入口；表格放不下时，关键列是否仍可查看。你可以用真实内容测试，因为短占位文字往往暴露不出问题。
- 3
按内容需要确定变化时机
页面不一定要在某个设备名称对应的宽度上统一切换。你可以逐渐缩窄浏览器：当卡片开始拥挤、导航开始换行时，再决定在哪里调整布局。这样定下的变化点更贴合这页的内容。
容易混淆的地方
响应式设计和弹性布局不是一回事：弹性布局是排列元素的一种工具，响应式设计关心的是页面在不同可用空间下能否保持可读、可操作。它也不等于单独做一套手机版：响应式页面通常在同一套页面中调整布局；如果手机上的任务和内容本来就不同，另做专门界面可能更合适。
什么时候用
适合用
- 做一个同时供电脑和手机访问的 AI 工具，聊天区、历史记录和输入区需要随屏幕宽度重新排列。
- 做运营后台时，团队既在办公室看完整数据，也会用手机查看指标和处理简单任务。
- 做产品官网时，同一组介绍、卡片和导航需要在不同宽度的浏览器中保持易读、易点。
不适合用
- 界面只运行在一台固定尺寸的展厅触摸屏上，设备和窗口都不会变化；按这台设备的尺寸做定屏布局更直接。
- 目标是生成供打印的固定纸张报表，而不是供浏览器浏览；重点改用打印排版，检查分页和纸张尺寸。
- 要调整的只是一个独立图标在工具栏里的大小，不涉及页面如何排列；处理图标尺寸即可，不必把它当成响应式设计任务。
练一练选一个答案，看看解释
你在做一个有侧边导航、筛选区和数据表格的后台。桌面端正常，但手机上表格把页面撑得很宽，筛选按钮也看不到。你会让 AI Agent 怎么改？
让 AI 帮你做复制给 AI Agent 直接用
请把这个后台页面做成响应式设计：宽屏保留侧边导航、筛选区和表格；窄屏重新安排导航与筛选入口，让关键数据可读、主要操作可点。根据内容拥挤的位置确定布局变化点，并检查不同宽度下有无整页横向溢出。