我到处搜索过,问题可能是我要找的东西不存在。

在更新网站时,我不断地追踪媒体查询。有没有办法显示元素的所有媒体查询?

我知道我可以将模拟器更改为特定设备,但它不会根据该设备大小向我显示该元素的媒体查询?

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

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

请您参考如下方法:

您可以,只需按照以下步骤操作即可:

1- 打开 Chrome 网络工具

2- 按模拟器图标

3- 按页面右上角的选项按钮(位于书签栏下方的黑色栏中),

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

5-在那里您可以看到所有媒体断点,

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

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

为了更好的解释:


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!