基于竖屏或横屏屏幕尺寸的CSS扩展？

Question

我有两个并排浮动的 div 元素。我希望在移动设备上，当处于竖屏模式下时，其宽度为 100px，而在横屏模式下为 200px。

因此，div 元素会在横屏模式下扩展，在竖屏模式下缩小一点。

有什么想法吗？

- Xtian

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 */
}

想要了解更多，可以查看这个例子页面或者这个页面。

编辑 因为我今天发现了这个页面：Hardbroiled CSS3 Media Queries——非常好的介绍。

- Dennis G

---

简洁优雅的方式。给你点赞！ - saadk

Answer 2

您可以使用CSS媒体特性“orientation”来实现这一点。这样，您可以根据屏幕方向指定样式，与屏幕尺寸无关。您可以在这里找到关于该媒体特性的官方w3.org定义。结合developer.mozilla.org上的规范，这将解释它的工作原理。

---

“orientation” 媒体特性的 w3.org 引述：“当‘height’媒体特性的值大于或等于‘width’媒体特性的值时，‘orientation’ 值为‘portrait’。否则，‘orientation’ 值为‘landscape’。”

developer.mozilla.org 的一段注释/引用关于“orientation”特性：“注意：此值（即纵向或横向）与实际设备方向不相对应。在大多数设备上，以纵向方向打开软键盘会使视口变得比高度更宽，从而导致浏览器使用横向样式而不是纵向样式。”

---

因此，再次强调，触发纵向或横向媒体查询实际上并不是屏幕方向。然而，它是屏幕高度和宽度之比！由于这个原因，在非移动/触摸设备上使用“方向特性”也是有意义的，因此我添加了一个小演示来展示这些媒体查询的行为。 JSFIDDLE DEMO （尝试调整视口大小） 以下是影响纵向和横向方向的代表性媒体查询。

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

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

 }

- kasper Taeymans