响应式截图

响应式截图会按桌面端、平板电脑和手机等多种视口宽度截取同一网页，展示布局如何适应不同屏幕尺寸。

Related workflow terms: 视口截图, 全页截图.

响应式截图为何重要

响应式网页设计意味着页面会根据视口宽度改变外观和行为。在 1440px 下正常的布局，缩小到 375px 后可能出现问题。响应式截图会记录这些差异，让设计师、开发者和 QA 团队确认布局在每个目标尺寸下都能正常工作。

这与只调整浏览器大小并用眼查看不同。响应式截图会留下可供比较、分享和归档的视觉记录。如果修改还需要由没有实时查看页面的人确认，这种记录尤其有用。

常用视口尺寸

大多数响应式截图流程会选择少量常见断点：

• 1440px——大型桌面显示器。
• 1280px——普通桌面显示器或笔记本电脑。
• 1024px——小型桌面显示器或横屏大尺寸平板电脑。
• 768px——竖屏平板电脑。
• 375px——手机（iPhone 级别）。
• 360px——手机（Android 级别）。

具体尺寸取决于项目的断点。重点是截取布局真正发生变化的宽度，而不是随意选择尺寸。

如何截取响应式画面

手动方式是调整浏览器窗口大小，或使用开发者工具中的设备模拟，然后在每个宽度下分别截图。偶尔检查一次时可以这样做，但不适合批量任务。

自动方式使用无头浏览器或截图工具。用户提供一组视口宽度，工具会在一个批次中按每个尺寸截取同一 URL。一些网站爬虫工具原生支持这一功能，只需提供 URL 和目标视口，就会生成覆盖全部尺寸的一组截图。

响应式截图的常见错误

• 只截取桌面端宽度。 如果没有在手机和平板电脑尺寸下测试，较小视口中的布局问题往往要等到用户报告才会发现。
• 使用非标准视口尺寸。 随意选择窗口宽度，可能无法触发真实用户会遇到的布局断点。应使用项目实际的 CSS 断点或常见设备宽度。
• 没有比较修改前后。 响应式截图并排比较时最有价值：一组来自修改前，一组来自修改后。缺少对比就很难判断新布局正确，还是发生了退步。
• 忘记横屏方向。 平板电脑和手机都可以横向使用。如果布局应同时支持两个方向，就需要分别截图。