1
Media query 断点
检测由 media query 断点触发的布局变化，确保在所有视口宽度上的一致性。
20 测试用例
响应式
响应式不再是面向公众站点专属的话题：业务型应用如今会在会议中通过平板查阅、在客户处移动办公时使用，或在尺寸不寻常的外部显示器上展示。中间断点上的视觉回归——典型如 iPad 上的 820px 或小型笔记本的 1024px——可能让您应用的一部分变得不可用，而本地无人察觉，因为开发人员通常只在单一尺寸下工作。经典场景：断点从 768px 改为 480px，挤压了平板上的列结构；hamburger 菜单被替换为桌面菜单后越出屏幕；或移动端 font-size 一直应用到 1024px，使便携屏幕上所有文字显得过小。Container queries 增加了一个新的复杂度维度，因为它们依赖于父元素的上下文而非全局 viewport，使回归更加难以预测。在某些浏览器上，父元素遗漏的 container-type 即足以破坏整个组件的渲染。Delta-QA 通过在团队定义的多个 viewport 尺寸下捕获每个页面来处理这些场景，建立多格式的视觉 baseline。每次执行时，diff 突显堆叠错误的列、溢出的元素、过度收缩的文本、错位的组件和新出现的水平滚动条。这种方式让 QA 团队覆盖站点所有断点，而无需在每次部署时手动调整每台设备上的浏览器尺寸，确保访客和操作员所使用的所有设备上视觉回归测试的一致性。
我们检测什么
2
Container queries
监控根据父元素尺寸调整组件样式的 @container 规则。
3
视口相关布局
捕获使用视口单位（vw、vh、dvh、svh）和相对尺寸的元素变化。
4
响应式图片
跟踪图片尺寸、aspect-ratio 和跨断点 srcset 渲染的变化。
实际场景
🎯
平板上排列错乱的网格
一位开发者将响应式断点从 768px 改为 480px。在桌面端和手机端（375px）一切正常。但在平板（768px）上，3 列功能区被压缩——文字无法阅读，图片互相重叠。iPad 访客看到的是一个损坏的网站。测试人员检查了桌面端和手机端，没有检查中间尺寸。Delta-QA 在每个断点捕获截图并对比：平板上被压缩的列和重叠元素在差异图中清晰可见。
⚠️
打不开的汉堡菜单
移动端汉堡菜单在 375px 下完美运行。但在 820px（iPad）下，显示的是桌面菜单……只是它因为最小宽度为 1024px 而溢出了屏幕。菜单项被截断，iPad 访客无法导航。手动检查每个组件在每个断点下的效果根本不现实。Delta-QA 在 820px 下捕获截图并对比：溢出屏幕的菜单在差异图中立刻显现。
💡
变得太小的文字
一位开发者调整了 media query，移动端的 font-size（14px）现在应用到 1024px 而不是 768px。在笔记本电脑上，所有文字都略显偏小——访客不自觉地眯眼阅读。开发者在自己的 1440px 屏幕上测试，一切正常。Delta-QA 在 1024px 下捕获截图并对比：缩小的文字和由此产生的布局偏移在叠加图中清晰可见。