如何快速检查不同浏览器尺寸下的页面布局？含响应式样式验证

针对你提到的手动拖窗口效率低、设备工具栏操作繁琐，以及需要精确查看指定尺寸（如1024x768）布局的问题，分享几个Chrome DevTools里的高效技巧，全程可以用键盘操作，不用调整浏览器窗口大小：

1. 自定义尺寸预设，一键切换 #

打开DevTools（快捷键F12或Ctrl+Shift+I），按下Ctrl+Shift+M切换到设备工具栏。在顶部的尺寸选择下拉框中：

• 点击最右侧的「添加设备」按钮，输入你需要的精确尺寸（比如1024x768、767x1024等），勾选「添加为常用设备」，保存后就能在下拉框里直接选择这些预设尺寸。
• 后续调试时，只需点击下拉框选对应的尺寸，或者用键盘上下箭头快速切换已保存的预设，瞬间就能看到对应视口下的布局效果。

2. 用命令菜单快速指定任意尺寸 #

如果你只是临时查看某个尺寸，不想保存预设，用命令菜单更高效：

1. 打开DevTools后，按下Ctrl+Shift+P调出命令菜单；
2. 输入「Resize to specific dimension」（或者直接输入关键词如「resize」快速筛选）；
3. 在弹出的输入框中输入精确尺寸（比如1024x768），回车确认，DevTools会立刻将视口调整到该尺寸。

针对你给出的MWE示例，用这个方法验证背景色变化非常快：

• 输入1024x768：视口宽度大于1023px，背景色为#eee；
• 输入1023x768：视口宽度触发第一个媒体查询，背景色变为#ccc；
• 输入767x768：视口宽度触发第二个媒体查询，背景色变为#aaa。

3. 键盘快捷键快速切换视口状态 #

除了上面的方法，还有几个实用快捷键可以减少鼠标操作：

• 按下Ctrl+Shift+M快速切换设备工具栏的开启/关闭；
• 在设备工具栏开启状态下，按下Ctrl+Shift+R可以刷新当前视口下的页面；
• 如果需要快速切换移动端/桌面端视口，直接在命令菜单输入「Toggle device toolbar」即可。

这些技巧比手动拖动窗口精准得多，也比反复点击设备工具栏高效，完全满足你快速验证不同尺寸布局的需求。

内容的提问来源于stack exchange，提问作者Vrokipal