21

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

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

有任何想法吗？

4

2 回答 2

61

好吧，这在 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 */
}

查看此示例页面以获取更多说明，或查看此示例页面。

编辑只是因为我今天找到了这个页面：Hardbroiled CSS3 Media Queries - 非常好的文章。

于 2010-10-04T19:45:55.780 回答
2

您可以通过使用 css 媒体功能“方向”来做到这一点。这样，您可以根据屏幕方向指定样式，与屏幕大小无关。您可以在此处找到有关此媒体功能的官方 w3.org 定义。结合developer.mozilla.org上的规范，这将解释它是如何工作的。

来自 w3.org 关于“定位”媒体功能的引述：

当“<strong>height”媒体特征的值大于或等于“<strong>width”媒体特征的值时，“orientation”媒体特征为“portrait” 。否则“方向”就是“风景”。

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

 }
于 2015-03-21T12:13:33.120 回答