1
Media query 断点
检测由 media query 断点触发的布局变化，确保在所有视口宽度上的一致性。
20 测试用例
响应式
响应式设计确保您的网站在所有屏幕尺寸上正常工作。损坏的断点可能使页面在某些设备上无法使用。Delta-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 下捕获截图并对比：缩小的文字和由此产生的布局偏移在叠加图中清晰可见。