2017-03-09 6 views
0

レスポンスブートストラップメニューの要素に影響するメディアクエリを表示するにはどうすればよいですか?Google Chrome DevツールまたはFirefox開発ツールを使用してメディアクエリを表示するにはどうすればよいですか?

メニューが950pxの下に表示されません。メディアクエリを見つけて再生することができますが、表示することはできますが表示できません。

サイトはこちらです:

http://www.longislandpartypeople.com/

+0

メニューはこのために表示されません。ルール:@media(最大幅:950ピクセル){ .main-menu { ディスプレイ:なし; }}これはあなたのstyle.cssの行743 –

答えて

2

クローム開発ツールは、その応答性のテスト(開発ツールの左上のモバイルアイコン)に組み込まれているいくつかの素晴らしい機能を備えています。これらの

enter image description here

一つgraphical representation of all media queriesを見ています。これを有効にするには、垂直の省略記号をクリックし、[メディアクエリーを表示]を選択します。そこから、現在のブレークポイントをすべて見ることができます。最後に、変更した箇所に右クリックすると(応答ウィンドウのサイズを変更すると)、「ソースコードで表示」を使用して、そのクエリのソースCSSを表示できます。 .main-menudisplay:noneに設定されている

@media all and (max-width: 950px) { 
.mobile-button { display:block; } 
.main-menu { display:none; } 
.photo-slider { height:300px; } 
.top-wrapper .slider .center-wrapper { left:80px; right:80px; bottom:150px !important; } 
.top-wrapper h1 { line-height:52px; } 
} 

:あなたのケースでは

は、(max-width: 950px)のメディアクエリをクリックすると、ソースコード内の次の場所にあなたをもたらします。開発ツールでは、ソースコードの行も表示されます。この場合、743行目(ちょうどJonas Giuroが彼のコメントで指摘した通り)。

+0

にあります "垂直の楕円をクリックして"メディアクエリを表示 "を選択すると有効になりますが、その設定を見つけることができません。さらに、Chrome開発ツールの使用方法に関するチュートリアルやマニュアルはありますか?アドバンスドデベロッパー向けのドキュメントではありませんか?ありがとう –

+0

問題ありません。ここでは、[画像](http://imgur.com/Re7py0v)黄色で、縦の楕円は青で囲んでいます。その楕円をクリックすると、[このドロップダウン](http://imgur.com/PojZAQO)から「メディアクエリを表示」を選択できます。チュートリアルを見つけることができるかどうかを確認してください。この場合は、直接Googleのドキュメントが本当に最高のようです。[こちら](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/ )始めるためのすばらしい、簡単な場所。 –

+0

ありがとう、ありがとう!私は –

0

スタイルが適用されている場合は、メディアクエリは、開発ツールの要素のスタイルで表示されている。ここ

があなたの問題の設定は次のとおりです。

enter image description here

関連する問題