用于@media 查询检查器的开发工具

4 css google-chrome developer-tools google-chrome-devtools

我错过了什么吗?因为我尝试使用 Chrome devTools,这里它描述了在哪里/如何访问 @media 查询检查器,但我没有看到它应该在哪里...... GOOGLE CHROME DEVTOOLS MEDIA QUERIES Inspector

如果有人建议检查媒体查询,那么也非常感谢。也许这是一个愚蠢的问题,而不是“值得”,但我感谢这里的任何帮助(我也可以根据您的要求关闭/删除这个问题)。非常感谢。

use*_*ca8 9

默认情况下,查看媒体查询断点是隐藏的。

在按下“切换设备工具栏”按钮后处于“响应模式”时,您可以使用查看窗口(不是 devtools 窗口)中的三个垂直点图标菜单将其打开,然后“显示媒体查询”:

在此处输入图片说明

然后,这将为您提供 CSS 中所有媒体查询的可视化表示:

  • 左键单击以将设备模拟器调整为该大小
  • 右键单击然后“在源代码中显示”以跳转到定义它的文件和行