如何使用Google Chrome开发工具或Firefox开发工具查看媒体查询？

Question

如何查看影响响应式引导菜单上元素的媒体查询？

菜单不会显示在950px下，如果我可以找到媒体查询并使用它播放我可以看到它，但看不到它。

网站在这里：

http://www.longislandpartypeople.com/

Answer 1

Chrome Dev Tools内置了响应式测试功能（Dev Tools左上角的移动图标）。

其中一个是查看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在他的评论中指出的那样）。

Answer 2

应用样式时，媒体查询将显示在开发工具

中的元素样式中

以下是您违规的设置：