在Chrome开发工具中使用媒体查询

Question

我到处搜索过，问题可能就是我所寻找的东西不存在。

在更新网站时，我一直在追查媒体查询。有没有办法显示元素的所有媒体查询？

我知道我可以将模拟器更改为某个设备，但它没有根据设备大小向我显示该元素的媒体查询？

我在想也许有一个设置，但我找不到它。

如何使用Google Chrome工具轻松查看影响我在DOM中使用的元素的所有媒体查询？

Answer 1

您可以按照以下步骤操作：

1-打开chrome 网络工具，

2-按模拟器图标，

3-按下页面极右上方中的选项按钮⋮（在书签栏下方的黑色栏中），

4-按“显示媒体查询”，

5-在那里你可以看到所有媒体断点，

6- 右键单击所需的断点，然后按“显示源代码”查看CSS。

参考： https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports#media-queries

为了更好的解释：