如何使用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

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n