html - 在 Firebug 中显示当前事件的媒体查询规则

Question

Firebug(Firefox Web 开发插件)是否可以显示当前激活的媒体查询规则？

例如:我照常监视 div 元素。然后我将浏览器窗口缩放到小于 400 像素(或使用 Firefox web dev screen size tool)。我想像这样查看此元素当前处于事件状态的规则列表。

@media screen and (max-width: 400px) {
  div { float: left }
}

使用 Firebug 或类似工具是否可行？

Answer 1

您可以使用类似这样的东西来显示当前正在运行的媒体查询，请更新您的媒体查询:

div 将打印“打开”mediaquery 的内容，因此您可以隐藏 div，并将其仅用于开发目的。

@media  (min-width: 400px) {
  .mediaq:after {
    content:'min 400' 
  }
}
@media (min-width: 800px) {
  .mediaq:after {
    content:'min 800' 
  }
}
@media  (min-width: 1200px) {
  .mediaq:after {
    content:'min 1200' 
  }
}

<div class="mediaq"></div>