logo标签列表

如何使用Firebug和Chrome开发者工具调试不同媒体查询内的CSS？

google-chromecssfirebugmedia-queries
12

如何在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;
   }
}
4个回答
4
“浏览器或设备通过监听窗口的宽度和高度来确定方向。如果高度大于宽度，则窗口处于纵向模式。如果宽度大于高度，则处于横向模式。”
“更多信息：http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/”
“基本上，您需要调整浏览器窗口大小以使纵向方向css生效。”
“如果在浏览器窗口中打开firebug，即firebug位于底部，则浏览器窗口的高度会发生变化，导致方向变为横向，因此您将失去纵向样式。对于firebug和chrome开发人员工具，请尝试在它们自己的窗口中启动工具，以便不影响浏览器大小。”
“附注：我会使用Firebug进行此类编辑，因为您可以清楚地看到随着浏览器调整而改变的CSS。”
2

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

0
非常有用的技巧！尽管答案指定了“Chrome”，而这个答案是关于Firefox的，但我认为它值得点赞。 - Ideogram
0
正如他们所说，您可以调整浏览器窗口的大小，使其高度大于宽度，这样媒体肖像就是真实的。 您可以使用此网址http://robnyman.github.com/matchmedia/来调整浏览器大小，刷新该页面，您将看到它是否检测到纵向模式。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接