根据屏幕/窗口方向对进行排序

Question

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

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

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

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

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

我很想听听您的意见。

Answer 1

使用 CSS 媒体查询！

它允许您指定在某些条件下（在本例中是窗口尺寸的变化）要应用的 CSS。

查看此链接：

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

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

用法示例：

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

上述语句意味着，对于 980 像素以下的所有分辨率，应用此样式。如果您执行以下操作：

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

这会将给定的CSS应用于从320px到480px的所有分辨率。

同样，仅应用最小宽度 XX 将为所有 XX 及以上分辨率应用给定的 CSS。

Answer 2

只需将它们浮动即可，如果屏幕太窄，它们会适当下降。

div {
    float:left;
}

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

div {
    float:left;
}

.mobile div {
    clear:both;
}