12

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

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

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

4 回答 4

4

"A browser or device determines the orientation by listening to the width and height of the window. If the height is larger than the width the window is in portrait mode. If the width is larger than the height it’s in landscape mode."

More info: http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/

Basically you need to resize your browser window for the portait orientation css to take effect.

If you open firebug within the browser window ie. firebug is at the bottom, the height of the browser window changes, causing the orientation to become landscape, thus you are losing your portrait styles. For both firebug and chrome developer tools, try launching the tools in their own window so your browser size is not affected.

PS. I would use Firebug for this kind of editing because you can clearly see the css changing as you resize the browser.

于 2011-08-01T05:33:28.013 回答
2

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

于 2011-12-12T14:29:22.467 回答
0

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

于 2012-08-03T14:51:34.837 回答
0

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

在此处输入图像描述

于 2012-11-08T03:58:26.780 回答