基于纵向或横向屏幕尺寸的CSS扩展？答案

【问题标题】：css expanding based on portrait or landscape screen size?基于纵向或横向屏幕尺寸的CSS扩展？
【发布时间】：2011-04-20 23:36:24
【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

标签： css mobile landscape portrait

【解决方案1】：

这在 CSS2 中是不可能的，但可以用 Javascript 做你想做的事情（读出屏幕大小等）。

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

使用 CSS3，您可以获得这样有趣的东西（或者您甚至可以指定宽度，例如 200 像素）：

/* 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 - 写得很好。

【讨论】：

简单优雅的方式..为你点赞！

【解决方案2】：

您可以通过使用 css 媒体功能“方向”来做到这一点。这样，您可以根据屏幕方向指定样式，与屏幕大小无关。您可以在 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*/

 }

【讨论】：