产品与设计 · 界面体验
响应式界面Responsive UI
同一界面随可用宽度重排列数、导航、触控与字号；断点是内容拥挤的阈值，组件按容器宽度响应。
容器宽度验收台：拖动看界面换档
同一个 CodeNow 界面，拖动滑块改变容器宽度，看它在 640、1024 两个断点处如何换档。列数、导航形态、触控读数和横向溢出都长在设备物件上——这正是组件按自身宽度响应（容器查询思路）。
任务：拖动滑块改变容器宽度（或按档位跳转），看同一界面怎么换档——列数、导航形态、触控尺寸、字号都长在设备物件上，不只是下方说明。打开「固定宽度」对照看溢出。
3 步完成任务
任意宽度都能开始
无横滚 ✓主 CTA 在第一屏 ✓触控 44px字号 16px
断点依据：触控优先：1 列 + 折叠菜单，主 CTA 满宽，触控目标 44px。
手机档位 · 390px：触控优先：1 列 + 折叠菜单，主 CTA 满宽，触控目标 44px。下一步：拖过 640 看断点处列数与导航如何同时换档；或打开「固定宽度」对照看溢出。
面板里测到的结论怎么用
刚才的拖动对应四条判断：断点是阈值不是设备名、断点处多维度同时换档、固定宽度必溢出、组件按容器宽度响应。
- 断点是「内容开始无法舒适完成」的阈值（这里 640、1024），不是设备型号；390/768/1280 只是验收截图的档位。
- 每个断点要同时调列数、导航形态、触控尺寸和字号——拖过 640 时面板里这四项一起换，不是只改列数。
- 固定宽度的界面塞进窄容器必然横向溢出、主 CTA 出第一屏；响应式的硬指标就是无横滚、主 CTA 可达。
- 组件响应自己的容器宽度（容器查询），而不是猜设备；把它放进侧栏、弹窗、网格里也能自适应。
什么时候做响应式
同一界面要在多宽度完成主任务时做响应式；只在单一宽度使用或另有独立移动版时，可以不强求。
营销页、文档站、后台仪表盘、可嵌入第三方的组件——同一界面要在桌面、平板、手机和侧栏里都能完成主任务。
只在桌面用的内部工具、独立移动 App、或复杂操作台——强行响应式不如为该尺寸单独设计，或用容器查询让组件自适应。
怎么做一次响应式验收
从主任务走到全宽度可用的最短路径。
- 写清这一界面的主任务（如「开始任务」），确认主 CTA，再选定验收档位 390/768/1280。
- 从宽到窄拖动容器宽度，记录内容开始拥挤、导航变形或触控挤在一起的临界值——那就是断点。
- 在每个断点同时改列数、导航形态、字号和触控尺寸，而不是只改列数或裁掉内容。
- 三档逐一验收：无横向滚动、主 CTA 在第一屏、触控目标 ≥44px、键盘和读屏都能完成主任务。
同一界面手机端：正例与反例
目标都是让用户在手机开始任务。差异只在按宽度重排，还是把桌面布局硬塞。
手机端把 3 列改为一列，横排导航折叠成「菜单」，主 CTA「开始任务」保留在第一屏且满宽，无横向滚动，触控目标 44px。
差异：只改布局策略——列数、导航、触控随宽度换档，主任务路径不变。手机端保留桌面的 3 列和横排导航，内容约溢出 634px，用户必须横滑才能看完，主 CTA 被挤到第二屏外。
差异：只改一处——把桌面布局直接搬到窄屏，没有按宽度重新排布。快速自测
拖动滑块时布局在 640 和 1024 换档。这两个断点最该由什么决定？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。