如何使用Google Chrome開發工具或Firefox開發工具查看媒體查詢？

如何查看影響響應式引導菜單上的元素的媒體查詢？如何使用Google Chrome開發工具或Firefox開發工具查看媒體查詢？

如果我可以找到媒體查詢並使用它進行播放，該菜單不會顯示在950px下，我可以使其可見，但看不到它。

網站是在這裏：

http://www.longislandpartypeople.com/

2017-03-09 Bruno Vincent

菜單並不因爲這顯示規則：@media（max-width：950px）{ .main-menu {display：none; }}這是你的style.css的第743行 –

Chrome開發工具內置了他們的響應測試的一些強大的功能（在開發工具的左上方移動圖標）。

其中之一是觀看graphical representation of all media queries。可以通過單擊垂直省略號並選擇「顯示媒體查詢」來啓用它。從那裏，你將能夠看到你所有的當前斷點。最後，右鍵單擊發現更改的斷點（在調整響應窗口大小時），可以使用「在源代碼中顯示」來查看該查詢的源CSS。

在你的情況下，點擊媒體查詢(max-width: 950px)帶給您以下發生在你的源代碼：

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

凡.main-menu被設置爲display:none。開發工具也會向您顯示源代碼的一行;在這種情況下，第743行（正如在他的評論中指出Jonas Giuro）。

來源

2017-03-09 16:28:40

「它可以通過點擊垂直橢圓並選擇」顯示媒體查詢「來啓用，我無法找到該設置，你是什麼意思是垂直橢圓？此外，任何有關如何使用Chrome開發工具的好教程或手冊？文檔不適用於高級開發人員？謝謝 –

沒問題 - 這是一個[image]（http://imgur.com/Re7py0v）顯示啓用響應模式的按鈕，突出顯示以黃色顯示，垂直橢圓顯示爲藍色，然後當您點擊該橢圓時，您可以從[此下拉列表]中選擇「顯示媒體查詢」（http://imgur.com/PojZAQO）。看看我能否找到任何教程，但在這種情況下，直接Google文檔似乎是最好的。[Here's]（https://developers.google.com/web/tools/chrome-devtools/inspect-styles/））一個偉大的，簡單的地方開始。 –

好吧，明白了，謝謝！我 –

當正在應用的風格，媒體查詢顯示在該元素的樣式在開發工具

這是你的問題的設置：

來源

2017-03-09 16:31:58 Brad

如何使用Google Chrome開發工具或Firefox開發工具查看媒體查詢？

回答

相關問題