css根据纵向或横向屏幕尺寸扩展？

Question

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

因此，div 在横向模式下会扩大，在纵向模式下会缩小一点。

有什么想法吗？

Answer 1

这对于 CSS2 来说是不可能的，但是使用 Javascript 可以做你想做的事情（读出屏幕尺寸等）。

我不确定您正在研究什么技术，但 CSS3 通过 CSS3 Media 提供了您想要的东西查询。

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

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

查看 此示例页面了解更多说明，或这个。

编辑只是因为我今天发现了这个页面：Hardbroiled CSS3 媒体查询 - 写得很好。

Answer 2

您可以使用 css 媒体功能“方向”来做到这一点。这样您就可以根据屏幕方向指定样式，与屏幕尺寸无关。您可以在此处找到有关此媒体功能的 w3.org 官方定义。结合 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*/

 }