先记住这个答案
响应式验收要查的是布局在哪个宽度开始失效，而不是只看几台预设设备。先连续缩放视口找换行、遮挡和触控目标问题，再模拟颜色、动效等用户偏好；最后用真机检查软键盘、地址栏和触摸行为。设备工具栏能帮忙定位断点，却不能完整替代系统浏览器。
- 拖动视口找内容断裂点
- 模拟深色和减少动态效果
- 检查布局、图片与性能
- 实机补测键盘和工具栏
从设备预设转到连续宽度检查
一个详情页在常用手机预设里正常，但 720 像素宽时侧栏与正文碰撞。不要只测 375 和 1440 两个点；拖动响应式视口，找到布局刚开始破坏的位置，再决定断点。切换深色偏好看文字对比度，切换减少动态效果看轮播和视差是否停止。最后在手机上测试地址栏收起、输入框弹出软键盘以及长内容滚动。
@media (max-width: 48rem) {
.detail { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.detail__hero { animation: none; }
}
/* 在 DevTools 里跨过断点并模拟动态效果偏好 */响应式测试要同时看视口尺寸、媒体特性和真实输入能力。 除了预设手机宽度，还要覆盖内容本身的极端情况。把商品标题替换成长文本、把价格改成较大的数字，再在断点前后检查卡片是否溢出；切换深色模式后检查图标是否仍可辨认。这样的测试能找到“空数据时看着正常，真实内容一来就挤坏”的问题，比仅截几张标准视口截图更接近线上情况。
模拟条件与实机有各自边界
DevTools 可快速复现断点附近的 CSS 行为，也可在 Rendering 等面板模拟特定偏好；Performance 与 Network 面板帮助发现切换布局时的掉帧和资源浪费。它不能完整模拟设备的浏览器 UI、触摸精度、虚拟键盘和硬件性能，因此最终要选几台真实设备或远程调试。检查点应来自内容断裂，而不是只来自设备型号。
检查点不应只停在 375px 和 1280px。先让窗口缓慢穿过卡片刚开始换行的宽度，再把浏览器文字放大到 200%，看导航是否遮挡、表单标签是否被截断。触屏和软键盘会改变实际交互与可视区域，尤其底部固定按钮可能被键盘盖住；这些问题在普通桌面设备模拟里未必能完整重现。
容易答错的地方
- 只验证几个热门设备宽度
- 中间宽度和字体放大后的临界点更容易暴露布局断裂。
- 把 DevTools 设备预设当成实机验收
- 软键盘、浏览器工具栏、性能和触摸行为仍可能不同。
面试官还会怎么问？
怎样快速找断点？
缓慢拖动视口，记录内容开始挤压或溢出的宽度，再用内容需求定阈值。
深色和减少动态效果在哪里测？
用 DevTools 的媒体特性模拟入口切换偏好，同时检查实际系统设置下的页面。
测试图片还要看什么？
观察 Network 下载的资源与显示尺寸是否匹配，以及缩放、切断点时是否闪烁或跳动。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。