在Firebug中顯示當前活動的媒體查詢規則

Firebug（Firefox Web開發附加組件）可以顯示哪些媒體查詢規則當前處於活動狀態？在Firebug中顯示當前活動的媒體查詢規則

例如：我照例監視div元素。然後，我將瀏覽器窗口縮小到小於400像素（或使用Firefox web dev屏幕大小工具）。我想查看當前對此元素有效的規則列表。

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

Firebug或類似的工具可能嗎？

來源

2016-11-07 bortran

我不使用Firebug，但在大多數其他瀏覽器，開發人員工具將不僅向你施加什麼樣的款式，但是這些樣式的來源。在Chrome中，有效的規則位於顯示選擇器的部分。 –

在Firebug中未應用的規則是刪除線，如果您不使用縮小文件，則會在規則旁邊顯示行號。 – Core972

是的，我知道所有這些，但在有很多樣式的網站中搜索活動樣式會花費相當多的時間，如果這些樣式中的一些樣式來自多個CSS源，那麼其中一些樣式可能會縮小。所以我正在尋找一個快速和現實的工具。 – bortran

您可以使用這樣的事情，顯示什麼mediaquery正在工作，請與您的mediaqueries更新：

股利將打印什麼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>

來源

2016-11-07 15:58:53

非常好，但不完全是我是尋找。我需要一個已經制作好的CSS的工具。 – bortran

在Firebug中顯示當前活動的媒體查詢規則

回答

相關問題