如何使用 Firebug 和 Chrome 开发工具在不同的媒体查询中调试 css？

Posted 2023-03-06

【中文标题】如何使用 Firebug 和 Chrome 开发工具在不同的媒体查询中调试 css？

【英文标题】：How to debug css inside different media queries with Firebug and Chrome Developer tools?

【发布时间】：2011-10-14 00:30:38

【问题描述】：

如何在 Chrome 开发者工具中调试 css fororientation:portrait？

我在 (orientation:portrait) 中写的任何内容都无法通过 Firebug 和 Chrome 开发者工具即时编辑。它总是显示正常的属性。

/*normal styles here */
#wrap 
   width:1024px;

@media only screen and (orientation:portrait)
   /* portrait styles here */
   #wrap 
      width:768px;
   

【参考方案1】：

“浏览器或设备通过监听窗口的宽度和高度来确定方向。如果高度大于宽度，则窗口处于纵向模式。如果宽度大于高度，则处于横向模式。 "

更多信息：http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/

基本上你需要调整浏览器窗口的大小才能使纵向css生效。

如果您在浏览器窗口中打开 firebug，即。 firebug 位于底部，浏览器窗口的高度发生变化，导致方向变为横向，因此您失去了纵向样式。对于 firebug 和 chrome 开发者工具，请尝试在各自的窗口中启动这些工具，以免影响您的浏览器大小。

附言。我会使用 Firebug 进行这种编辑，因为您可以清楚地看到 CSS 在调整浏览器大小时发生变化。

【参考方案2】：

从最近（Chrome 17）开始，Chrome DevTools 会显示影响每个匹配的 CSS 规则（如果存在）的媒体查询上下文。虽然当前实现不会更新媒体查询评估更改的样式（您需要重新选择受影响的节点），但http://webkit.org/b/74292 会跟踪请求以动态更新匹配的 CSS 规则。

【参考方案3】：

正如他们在上面所说的，您可以调整浏览器窗口的大小，使其高度大于宽度，这样媒体肖像才是真实的。 您可以使用此 url http://robnyman.github.com/matchmedia/ 调整浏览器大小，刷新该页面，您将查看是否检测到肖像为真。

【参考方案4】：

现在终于可以在 Firefox 16 响应模式下使用了。在此处查看 Youtube 视频http://www.youtube.com/watch?v=t07cLJhJkjQ

【讨论】：

非常有用的技巧！即使答案特定于“chrome”并且这个答案是关于 Firefox，我相信它确实值得投票。