响应式验收台：切换视口看页面重排
同一个 CodeNow 着陆页，在桌面、平板、手机三种宽度下该怎么排。切换视口和布局模式，卡片列数、导航形态、横向溢出和主 CTA 都长在页面物件上。
任务：验收 CodeNow 着陆页在三种宽度下是否可用。切换视口和布局模式，看页面本身怎么变——卡片列数、导航形态、横向溢出徽章和主 CTA 是否还在第一屏，都长在页面物件上，不只是下方说明。
3 步完成报销
同一页面，任意宽度都能开始。
无横向溢出 ✓主 CTA 在第一屏 ✓
视口宽度
布局模式
断点依据：宽度充足：3 列 + 横排导航
判断与下一步：响应式 · 桌面 1280px：3 列内容，横排导航，无横向溢出，主 CTA 在第一屏。下一步：切到更窄视口看重排，或对照「固定桌面布局」。
面板里测到的结论怎么用
刚才的切换对应四条判断：列数随宽度变、导航形态随宽度变、断点按内容需要、等比缩小不是响应式。
- 响应式 = 同一内容按可用宽度重新排布（列数、导航、字号），不是把桌面版等比缩小。
- 断点是「内容开始无法舒适完成」的临界点（如 3 列开始拥挤），不是设备型号清单。
- 每个断点要改的是列数、间距、导航形态和字号；不能直接裁掉标题、主 CTA 或错误反馈。
- 验收硬指标：无横向滚动、主 CTA 在第一屏、触控目标足够、键盘能完成主任务。
什么时候用响应式
同一内容要在多设备完成主任务时做响应式；只在单一宽度使用或另做独立移动版时，可以不强求。
营销页、文档站、后台仪表盘——同一套内容要在桌面、平板、手机都能完成主任务。
只在桌面用的内部工具、独立移动 App、或复杂交互操作台——强行响应式不如为该尺寸单独设计。
怎么做一次响应式验收
从唯一任务走到三宽度可用的最短路径。
- 写清这一页的主任务（如「让用户开始使用」），确认主 CTA。
- 从宽到窄拖动视口，记录内容开始拥挤、导航变形或触控挤在一起的临界宽度。
- 在每个临界点改列数、导航形态、字号和间距，而不是裁掉内容。
- 三宽度逐一验收：无横向滚动、主 CTA 在第一屏、键盘和触控都能完成主任务。
同一着陆页手机端：正例与反例
目标都是让用户在手机开始使用。差异只在按宽度重排，还是把桌面布局硬塞。
手机端把 3 列卡片改为一列，横排导航折叠成「菜单」按钮，主 CTA「开始使用」保留在第一屏，无横向滚动。
差异：只改布局策略——列数和导航形态随宽度变化，主任务路径不变。手机端保留桌面的 3 列和横排导航，内容约溢出 690px，用户必须横滑才能看完，主 CTA 被挤到第二屏外。
差异：只改一处——把桌面布局直接搬到窄屏，没有按宽度重新排布。快速自测
一个 4 列的数据表格在手机端挤成一团，下面哪种是响应式做法？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。