如何使用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开发工具查看媒体查询？

回答

相关问题