Vibe Coding 响应式布局验收：用内容失效点覆盖真实边界

Vibe Coding 生成的页面常在提示词指定的 390px 和 1440px 截图上表现良好，却在 768px 出现按钮挤出卡片、浏览器放大后导航遮住标题，或手机横屏时弹窗无法滚动。原因不是少写一个媒体查询，而是验收对象被误写成两个设备截图，没有覆盖内容、容器与交互共同决定的失效点。

响应式的目标是任务可完成，而不只是元素没有越界。CSS Container Queries解释组件按容器适配的机制；本文把 CSS 能力连接到可重复的发布验收。

从内容失效点推导规则

先在无媒体查询的基础流中建立合理顺序：块级内容自然换行，图片具有稳定尺寸约束，控件能收缩或换行。随后从最窄支持宽度逐步拉宽，记录结构在何处真正失效，例如标题与动作无法共存、表格列失去可辨识度、过滤器占据主体。这些点才是断点候选，不是某款手机的市场名称。

页面级结构、输入设备或用户偏好适合媒体查询；可复用组件应优先依据自身容器。一个卡片可能在宽桌面侧栏里仍然很窄，按 viewport 切成桌面布局会失败。容器查询要求建立 containment context，也要测试组件嵌套和容器名称，避免意外引用外层容器。

文本是主要压力源。夹具覆盖长中文标题、英文长词、URL、数字、翻译扩张、空值和多行字段错误。不要用截断隐藏完成任务所需的信息；确需省略时提供可访问的完整内容入口。按钮可换行但点击目标不能互相覆盖，图标按钮保留可访问名称。

建立多维验收矩阵

矩阵至少包含宽度、高度、缩放或文本放大、内容长度、方向、主题和状态。无需穷举笛卡尔积，应按风险选择代表组合并记录原因。例如：最窄宽度加最长内容；短高度加打开的键盘；中间断点加字段错误；宽屏加最大侧栏；暗色加焦点可见。

WCAG 2.2 Reflow 的理解文档给出在相当于 320 CSS 像素宽的条件下避免双向滚动的要求及二维布局等例外。它不是“所有页面绝不能横向滚动”：数据表、地图等确实需要二维表达时可以成为例外，但页面其他区域仍应可用，且例外需要明确。不要把整页 overflow-x: hidden 当修复，这只会裁掉不可达内容。

视口之外还需覆盖浏览器 200%/400% 缩放、系统字号、prefers-reduced-motion、触摸与键盘。支持范围由产品合同确定，测试矩阵记录浏览器与版本，不从单一 Chromium 结果推断所有引擎。图片响应式策略可以结合Web 图片优化，但资源大小优化不能改变关键图片的可理解性。

高度约束不能省略。移动浏览器地址栏、刘海安全区和虚拟键盘会改变可见区域，100vh 或固定底栏可能因此盖住提交按钮。实现使用平台支持的动态视口单位或安全区变量时，应保留合理 fallback，并在真实目标设备上抽查滚动与输入；模拟器只能证明已配置环境。横竖屏切换后还要确认没有保留旧尺寸计算、错误滚动位置或已经离开视口的焦点。

数据密集区域先定义小屏任务：是查看一条记录、比较少数列，还是必须浏览完整二维表。可以提供列选择、摘要卡或局部滚动，但不能复制两套含不同数据逻辑的 DOM 再靠 CSS 隐藏其中一套，因为这会增加重复焦点和读屏内容。例外区域需要可见名称、滚动提示和键盘可达路径。

自动断言结构，截图观察视觉

Playwright 等工具可模拟 viewport、颜色方案、语言和触摸，但设备描述符只是配置集合，不等于真实硬件。自动化先断言任务条件：主要 landmark 可见，关键动作可点击，焦点元素没有被 sticky header 遮挡，页面没有意外横向溢出，弹层内容可滚动，关闭后焦点返回触发器。

对普通页面，可比较 document.documentElement.scrollWidth 与 clientWidth 定位意外溢出；对批准的二维区域，断言滚动限制在该容器而不是整页。还要检查固定底栏和 cookie banner 是否遮挡最后一个控件，虚拟键盘打开时输入与错误提示能滚入视野。DOM 尺寸断言使用少量语义阈值，不把每个像素位置写死。

截图用于发现排版、对齐和裁切，方法沿用视觉回归测试，但必须固定字体、浏览器、动画和数据。截图通过不能证明按钮可点击或阅读顺序合理，结构断言也不能发现文本压线；两类证据互补。Playwright 端到端测试可承载关键用户流，不要为每个宽度复制完整测试。

专门攻击中间态与动态变化

测试宽度不要只取断点两端，再加入断点前后一个小增量和至少一个中间值。动态测试覆盖侧栏展开、校验错误出现、异步内容替换骨架、列表从零变多、toast 堆叠、软键盘和屏幕旋转。字体加载失败时要么使用可接受 fallback，要么阻断截图，不能让布局在截图后再次跳动。

键盘遍历每个布局变体，确认视觉重排没有改变不合理的 DOM 顺序。CSS order 可以改变外观，却不会自动改变阅读和焦点顺序；若桌面与移动信息顺序差异很大，应重新设计 DOM 或拆成语义等价视图，而不是只搬格子。Web 无障碍测试工具可自动发现部分问题，最终仍需要键盘和缩放人工检查。

发布门要求所有选定组合任务可完成、非例外区域无双向滚动、关键内容无遮挡、焦点可见、长文本不丢失、截图差异已审。每项结果绑定提交、浏览器、字体和夹具版本，失败时修布局或调整明确需求，不能简单删除困难视口。

响应式验收的核心不是收集设备名称，而是持续攻击布局的假设。内容失效点、容器边界和用户设置进入同一矩阵后，Agent 生成的界面才不会只活在提示词里的两张截图中。