基于纵向或横向屏幕大小的CSS扩展？

Question

我有两个浮动相邻的div。我想要的是当它在纵向模式下看它时，它的宽度为100px，并且可以在横向上说200px。实际上，这发生在移动设备上查看。

因此，div会在横向模式下展开并在肖像中缩小一些。

任何想法？

Answer 1

这是不可能的CSS2，但它可以做你想要的Javascript（读出屏幕尺寸等）。

我不确定你在找什么技术，但CSS3提供了你想要的与CSS3 Media Queries一模一样的东西。

有了CSS3，你有乐趣这样的东西（或者你甚至可以指定宽度例如200像素）：更多的解释，或者this one

/* Portrait */ 
@media screen and (orientation:portrait) { 
    /* Portrait styles here */ 
} 
/* Landscape */ 
@media screen and (orientation:landscape) { 
    /* Landscape styles here */ 
} 

退房this example page。

编辑仅仅因为我今天发现这个页面： - 非常好的写法。

Answer 2

您可以通过使用css媒体功能“orientation”来做到这一点。这样，您可以根据屏幕方向指定样式，与屏幕大小无关。你可以找到关于这个媒体功能的官方w3.org定义here。结合developer.mozilla.org的规格，这将解释它是如何工作的。

的“方向”媒体的特点是“肖像”时的 值“高度”媒体：

---

关于“定位”媒体功能从w3.org报价特征是大于或等于与 '宽度'媒体特征的值。否则'方向'是'风景'。

从developer.mozilla.org有关 “定位” 功能的说明/报价：

注意：此值（即纵向或横向）不不符合实际设备方向。 以纵向方式打开大多数设备上的软键盘 会导致视口变得比高度更宽，从而导致浏览器使用横向样式而不是纵向。

---

因此重申，它实际上不是屏幕的方向触发肖像或风景媒体查询。但它是屏幕的高度和宽度之间的比例！因此，对非移动/触摸设备使用“定位功能”也是有意义的，因此我添加了一个小型演示来显示这些媒体查询的行为。

JSFIDDLE DEMO（尝试调整视口）

以下是影响纵向和横向代表性媒体查询。

@media screen and (orientation:portrait) { 
    /* Portrait styles */ 
    /*set width to 100px */ 

} 
@media screen and (orientation:landscape) { 
    /* Landscape styles */ 
    /* set width to 200px*/ 

}