按 Ctrl+Shift+M（Win/Linux）或 Cmd+Shift+M（Mac）可开启 Chrome DevTools 响应式调试视图，点击左上角手机图标进入，支持预设设备、横竖屏切换及 DPR 模拟；媒体查询断点在 Elements 面板 Styles 侧栏中通过 ? 图标跳转源码，支持禁用验证；需用 matchMedia 而非 resize 监听断点变化。
Chrome DevTools 的 Toggle device toolbar 怎么开
按 F12 或右键「检查」打开 DevTools 后，点左上角那个手机/平板图标（或按 Ctrl+Shift+M / Cmd+Shift+M），就能进入响应式调试视图。这个操作不是“启动某个插件”，而是原生功能，无需安装扩展。
常见错误是点了图标没反应——多半因为当前已处于「Elements」或「Console」标签页，但工具栏被缩在顶部边缘，需手动拖拽顶部横条向下拉出完整控制区；另外确保没勾选「Disable device emulation」（在三个点菜单 > More Tools > Rendering 里）。
- 默认显示的是
Responsive模式，可自由拖动窗口边缘或输入宽高数值 - 下拉选择预设设备（如
iPhone 14、Pixel 5）会自动加载对应 DPR 和 UA 字符串 - 点击
Rotate图标可切换横竖屏，注意部分 CSS 媒体查询依赖orientation，此时会触发重排
Media query breakpoints 在 Elements 面板里怎么定位
在 Elements 面板中选中某个元素，右侧的 Styles 标签页会列出所有生效样式，包括来自 @media 规则的声明。DevTools 会在每条媒体查询前加一个可点击的小图标（类似 ?），点它就能跳转到源码中对应 @media 块的位置。
容易忽略的是：如果 CSS 是通过 JS 动态注入（比如用 document.styleSheets[0].insertRule()），这些规则不会出现在 Styles 面板的媒体查询列表中，得去 Console 里查 getComputedStyle(element) 或直接看 document.styleSheets。
立即学习“前端免费学习笔记（深入）”；
- 鼠标悬停在媒体查询条件上（如
(min-width: 768px)）会高亮页面中匹配该断点的所有元素 - 勾选左侧的复选框可临时禁用某条媒体查询，快速验证布局是否真由它控制
- 若断点没生效，先确认 CSS 文件没被缓存（勾选 DevTools 的
Disable cache）
用 Rendering 面板模拟不同 DPR 和屏幕方向
打开 DevTools 的三个点菜单 > More Tools > Rendering，勾选 Emulate CSS media features，就能强制覆盖 prefers-color-scheme、prefers-reduced-motion、inverted colors 等特性；而 Emulate vision deficiencies 可模拟色弱场景——这些都直接影响响应式行为。
DPR（device pixel ratio）不能直接在 Rendering 面板设数值，但可通过切换预设设备间接控制：比如选 iPhone 14 时 DPR=3，选 Galaxy S22 时 DPR=4。若需精确测试 1.5x 或 2.25x，得手动在 Console 执行：
chrome.devtools.emulation.setDeviceMetricsOverride({width: 375, height: 812, deviceScaleFactor: 2.25, mobile: true})
- 注意：
deviceScaleFactor改变后，window.devicePixelRatio会同步更新，但screen.width/height不变 - 横竖屏切换后，某些框架（如 Next.js）可能不触发
useEffect重执行，得手动刷新或监听resize事件 - 部分旧版 Safari 不支持
prefers-contrast，即使 Rendering 面板开了也无效果
为什么 resize 事件监听不到断点变化
单纯监听 window.addEventListener('resize', ...) 只能捕获窗口尺寸变动，但无法感知媒体查询实际是否匹配——比如把浏览器从 769px 拖到 767px，resize 会触发，但你得自己判断当前是否进入 max-width: 768px 区间。
更可靠的方式是用 window.matchMedia()：
const mql = window.matchMedia('(max-width: 768px)');
mql.addEventListener('change', e => {
if (e.matches) {
console.log('进入移动端断点');
}
});
// 注意：Safari 旧版本需用 mql.addListener()，且 change 事件不冒泡
- 多个断点建议用单个
matchMedia调用 +if/else if判断，避免创建过多监听器 - 服务端渲染（SSR）环境下，
matchMedia在 Node 中不可用，首次渲染得靠useEffect或 hydration 后再挂载 - 不要在
change回调里直接操作 DOM 样式，优先用 class 切换，否则可能和 CSS-in-JS 库冲突
Computed 面板看最终生效的 width、flex、grid-template-columns 值，而不是只盯着媒体查询是否被标记为 active。 
