在Firebug中显示当前活动的媒体查询规则

Question

Firebug（Firefox Web开发插件）是否可以显示哪些媒体查询规则当前处于活动状态？

例如：我像往常一样监视 div 元素。然后我将浏览器窗口缩放到小于400px（或使用Firefox web开发屏幕大小工具）。我想查看此元素当前处于活动状态的规则列表。

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

使用Firebug或类似工具可以吗？

Answer 1

您可以使用类似的内容来显示当前正在使用的媒体查询，请使用您的媒体查询进行更新：

div会打印媒体查询的内容，因此您可以隐藏div，并仅将其用于开发目的。

＆＃13;

＆＃13;

@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' 
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;