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

Question

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

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

网站在这里：

http://www.longislandpartypeople.com/

Answer 1

Chrome Dev Tools 在其响应式测试中内置了一些很棒的功能（Dev Tools 左上角的移动图标）。

其中之一是查看所有媒体查询的图形表示。可以通过单击垂直椭圆并选择“显示媒体查询”来启用它。从那里，您将能够看到所有当前的断点。最后，右键单击您注意到更改的断点（当您调整响应窗口的大小时），您可以使用“在源代码中显示”来查看该查询的源 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在他的评论中指出的那样）。