如何调试css里面不同的媒体查询与Firebug和Chrome开发工具？ [英] How to debug css inside different media queries with Firebug and Chrome Developer tools?

问题描述

如何在Chrome开发人员工具中调试css的orientation：portrait？

How to debug css for orientation:portrait in Chrome Developer tools?

我在 c $ c>无法使用Firebug和Chrome开发人员工具即时编辑。它总是显示正常的属性。

What ever I write inside (orientation:portrait) can't edit on the fly from Firebug and Chrome Developer tools. It always shows the normal Properties.

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

推荐答案

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

"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."

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

基本上需要调整浏览器窗口以使portait orientation css生效。

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

如果在浏览器窗口中打开firebug ie。 firebug在底部，浏览器窗口的高度改变，导致方向变成风景，因此你失去了你的肖像风格。对于firebug和chrome开发者工具，请尝试在自己的窗口中启动这些工具，以便您的浏览器大小不受影响。

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。我将使用Firebug进行这种编辑，因为你可以清楚地看到css更改为你调整浏览器的大小。

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

这篇关于如何调试css里面不同的媒体查询与Firebug和Chrome开发工具？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！