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

Question

如何调试css的方向：Chrome Developer工具中的肖像？

我在(orientation:portrait)内写的内容无法通过Firebug和Chrome Developer工具动态编辑。它始终显示正常的属性。

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

Answer 1

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

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

基本上，您需要调整浏览器窗口的大小才能使portait方向css生效。

如果您在浏览器窗口中打开firebug即。 firebug位于底部，浏览器窗口的高度发生变化，导致方向变为横向，因此您正在丢失纵向样式。对于firebug和chrome开发人员工具，请尝试在他们自己的窗口中启动这些工具，这样您的浏览器大小就不会受到影响。

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

Answer 2

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

Answer 3

如上所述，您可以调整浏览器窗口的大小，使其高度大于宽度，以便媒体图像为真。 您可以使用此网址http://robnyman.github.com/matchmedia/，以便调整浏览器大小，刷新该页面，您将看到是否检测到真实的肖像。

Answer 4

最后现在可以在Firefox 16响应模式下使用。在这里查看Youtube视频http://www.youtube.com/watch?v=t07cLJhJkjQ