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

Question

我有两个相邻浮动的div。我想要的是当你在肖像模式下看它的时候，它的宽度是100px，在横向模式下，比如说200px。实际上，在移动设备上观看会发生这种情况。

所以div在横向模式下会扩展，在纵向模式下会缩小一点。

有什么想法吗？

Answer 1

这在CSS2中是不可能的，但是可以用Javascript来做你想做的事情(读出屏幕尺寸等)。

我不确定您正在研究的是什么技术，但是CSS3提供了您想要的CSS3 Media Queries。

有了CSS3，你就有了这样有趣的东西(或者你甚至可以指定宽度，例如200px)：

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

有关更多解释，请查看this example page或this one。

编辑只是因为我今天发现了这个页面：Hardbroiled CSS3 Media Queries -非常好的写作。

Answer 2

您可以通过使用css媒体功能"orientation“来完成此操作。通过这种方式，您可以根据屏幕方向指定样式，而与屏幕大小无关。你可以找到关于这个媒体特性here的官方w3.org定义。结合developer.mozilla.org的规范，这将解释它是如何工作的。

引用w3.org关于‘orientation’媒体特性的话：

当‘height’媒体特征的值大于或等于‘width’媒体特征的值时，‘orientation’媒体特征就是‘纵向’。否则“方向”就是“横向”。

来自developer.mozilla.org的关于“方向”功能的注释/引用：

注意:此值(即纵向或横向)不对应于实际的device orientation。在大多数设备上以纵向打开软键盘会导致视口变宽而不是变高，从而导致浏览器使用横向样式而不是纵向样式。

因此，需要重申的是，实际上并不是屏幕方向触发了纵向或横向媒体查询。然而，它是屏幕的高度和宽度之间的比例！正因为如此，在非移动/触觉设备上使用“定位功能”也是有意义的，因此我添加了一个小演示来展示这些媒体查询的行为。

(尝试调整视口大小)

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

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

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

 }