媒体查询测试必须分层推进：先用Chrome DevTools选具体型号或启用设备模拟并确认绿色提示条，再真机通过局域网访问验证，最后结合Responsinator、Am I Responsive等工具交叉比对断点与渲染效果。
媒体查询的测试和验证不能只靠“看一眼”，必须分层推进：先用浏览器工具快速筛查，再靠真机确认关键行为，最后结合多设备组合验证兼容性。
用Chrome DevTools选真实设备触发@media
默认的“Responsive”模式只是缩放窗口，不会改userAgent、不解析viewport meta、也不执行媒体查询。必须手动操作才能让@media真正生效：
- 点设备切换图标后，从顶部下拉菜单选具体型号（如iPhone 15、Pixel 7），不要停留在“Responsive”字样上
- 或点齿轮图标 → 勾选“Enable device emulation”，设置User agent和Screen size，并确认页面顶部出现绿色提示条“Device emulation enabled”
- 刷新页面后检查控制台是否输出匹配的断点日志，或用
getComputedStyle(document.body).backgroundColor验证对应样式是否加载
真机访问需绕过localhost限制
手机填http://localhost:3000，连的是它自己，不是你的电脑。要让真机看到页面，得走局域网：
- 查电脑IP：Windows用
ipconfig，macOS用ifconfig，找到类似192.168.1.100的地址 - 启动服务时绑定到
0.0.0.0:3000（不是默认的127.0.0.1），例如用python -m http.server 3000 --bind 0.0.0.0:3000 - 手机浏览器访问
http://192.168.1.100:3000/index.html，即可加载真实渲染效果
覆盖典型设备断点并交叉验证
光写@media没用，得按真实设备特征设断点，并在多个环境里比对表现：
立即学习“前端免费学习笔记（深入）”；
- 常用断点参考：
max-width: 480px（小屏手机）、481px–1024px（主流手机到小平板）、min-width: 1025px（大平板及以上） - 重点验证iOS Safari：地址栏动态遮挡会导致
vh不准，建议用height: -webkit-fill-available或JS计算可用高度 - 横竖屏切换时，检查
@media (orientation: landscape)是否及时响应，布局是否重排合理
辅助工具补位多机型预览
日常开发中可借助在线工具快速横向对比，省去反复切设备的时间：
- Responsinator：粘贴URL，一键查看iPhone、iPad、Android等主流设备框内渲染效果
- Am I Responsive?：左右分栏展示桌面+手机+平板三端同步变化，直观判断布局断裂点
- BrowserStack（需注册）：远程操控真实设备，验证触摸事件、300ms延迟、异步滚动抖动等模拟器无法复现的问题
