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

Question

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

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

/*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/

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

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

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