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

如何在Chrome开发者工具中调试方向：纵向的css

无论我在

（方向：纵向）

中写了什么，都无法通过Firebug和Chrome开发工具进行动态编辑。它始终显示正常属性

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

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

更多信息：

基本上，您需要调整浏览器窗口的大小，以使面向portait的css生效

如果在浏览器窗口中打开firebug，即firebug位于底部，则浏览器窗口的高度会发生变化，导致方向变成横向，从而丢失肖像样式。对于firebug和chrome developer工具，请尝试在它们自己的窗口中启动这些工具，以便不影响浏览器大小

---

注：我会使用Firebug进行这种编辑，因为你可以清楚地看到css随着浏览器大小的变化而变化。

最近（Chrome 17），Chrome开发工具显示影响每个匹配css规则（如果存在）的媒体查询上下文。虽然当前的实现不会在媒体查询评估更改时更新样式（您需要重新选择受影响的节点），但会跟踪动态更新匹配的CSS规则的请求。

如上所述，您可以调整浏览器窗口的大小，使其高度大于宽度，以便媒体肖像为真。

---

您可以使用此url调整浏览器大小，刷新页面，然后查看是否检测到肖像为真。

最后，现在可以在Firefox 16响应模式下使用。在这里查看Youtube视频

---

非常有用的技巧！尽管答案是“chrome”，而且这个答案是关于Firefox的，但我相信它确实值得投票支持。