Question

我想知道根据移动设备中的屏幕方向或桌面计算机中的窗口大小来订购div的方法。我有两个div，我想知道是否有办法根据浏览器可用屏幕的分布来修改它们的行为。

例如，当他们处于水平位置时，我希望他们表现得像这样：

 ----------------  ----------------
|                ||                 |
|                ||                 |
|                ||                 |
|      div1      ||      div2       |
|                ||                 |
|                ||                 |
|                ||                 |
 ----------------  -----------------

当他们处于垂直位置时，就像这样：

 ---------------- 
|                |
|                |
|                |
|      div1      |
|                |
|                |
|                |
 ---------------- 
 ---------------- 
|                |
|                |
|                |
|      div2      |
|                |
|                |
|                |
 ----------------

我很想听听你的意见。

Answer 1

简单地浮动它们，如果屏幕太窄，它们会适当地下降。

div {
    float:left;
}

如果您希望它们仅用于移动设备。检测您的移动浏览器并将.mobile附加到您的身体，或完全加载移动css文件。

div {
    float:left;
}

.mobile div {
    clear:both;
}

Answer 2

使用CSS媒体查询！

它允许您指定在特定条件下应用的CSS（在这种情况下，窗口尺寸的更改）。

点击此链接：

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

我建议您在CSS文件的顶部执行所有常规样式，然后在底部应用媒体查询。对于您的情况，在每个媒体查询中，您将为该特定方案指定所需的行为/定位。

样本用法：

@media screen and (max-width: 980px) { ...css... }

上述声明表示，对于UP TO 980px的所有分辨率，均适用此样式。如果您执行以下操作：

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { ...css... }

这将为所有分辨率应用给定的CSS，范围从320px到480px。

类似地，仅应用最小宽度XX将对所有XX及以上分辨率应用给定的CSS。

根据屏幕/窗口方向订购<div>＆＃div> </div>

2 个答案: