2016-11-07 40 views
0

Firebug(Firefox Web Developmentアドオン)では、現在アクティブなメディアクエリルールを表示できますか?Firebugで現在アクティブなメディアクエリルールを表示

例:いつものようにdiv要素を監視します。次に、ブラウザのウィンドウを400pxより小さくなるようにスケールします(または、FirefoxのWeb Devスクリーンサイズツールを使用します)。私はこのような要素のために現在アクティブなルールのリストを見たいと思っています。

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

Firebugまたは同様のツールで可能ですか?

+0

私はFirebugのを使用していないが、ほとんどの他のブラウザでは、開発者ツールが適用されているもののスタイルを紹介しますだけでなく、同様にそれらのスタイルのソース。 Chromeでは、実際にルールがセレクタを示すセクションにあります。 –

+0

Firebugでは適用されないルールは取り消し線です。縮小されたファイルを使用しない場合は、ルールの横にある行番号になります。 – Core972

+0

ええ、私はそれをすべて知っていますが、アクティブなスタイルを探すには、多くのスタイルを持つWebサイトでかなり時間がかかることがあります。さらに、これらのスタイルのいくつかが複数のCSSソースからのものであれば、だから私は迅速かつポイントツールのツールを探しています。 – bortran

答えて

2

あなたは、あなたのmediaqueriesで更新してください、mediaqueryが現在取り組んでいるかを示すために、このようなものを使用することができます:あなたはdiv要素を非表示にすることができますので、div要素は、mediaqueryが「on」であるものを出力します

、およびそれを使用します開発目的でのみ使用できます。

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

+0

非常にいいですが、正確には私のものではありません探している。私は既に作られたCSSのためのツールが必要です。 – bortran

関連する問題