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

Question

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

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

有任何想法吗？

Answer 1

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

我不确定您正在研究什么技术，但 CSS3 恰恰提供了您想要的 CSS3 媒体查询.

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

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

查看 这个示例页面 如需更多解释，或 这个.

编辑 只是因为我今天发现了这个页面： 严格的 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*/

 }