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

标签 google-chrome css firebug media-queries

如何在 Chrome 开发者工具中调试 css fororientation:portrait?

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

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

最佳答案

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

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

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

如果您在浏览器窗口中打开 firebug,即。 firebug 位于底部,浏览器窗口的高度发生变化,导致方向变为横向,因此您失去了纵向样式。对于 firebug 和 chrome 开发人员工具,请尝试在各自的窗口中启动这些工具,以免影响您的浏览器大小。

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

关于google-chrome - 如何使用 Firebug 和 Chrome 开发者工具在不同的媒体查询中调试 css?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6840751/

相关文章:

jquery - jQuery +控制台(Firebug):检查选择器

javascript - 2 种不同元素的相同外观

javascript - 防止访客使用 Firebug 或其他控制台进行欺诈

security - 从使用 Firebug 的恶意用户保护表单数据的最佳方法?

javascript - Chrome中的“操作码-1”是什么意思?

html - 图像/格太大

javascript - 将ScrollTop动画到一个位置:固定div

html - CSS 样式在 FF 和 IE 中正确定位,但在 Chrome 中没有

css - IE中的表格边框重叠

html - Chrome 在屏幕调整大小时不显示屏幕宽度?