html - 如何将屏幕分成2个div并与手机兼容？

Question

我正在使用 Joomla 3 并编辑应用程序并尝试使其与手机兼容。我正在使用带有 2 个 div 的 div 容器，它将充当列，例如：

<div>
<div style="float:left; max-width:50%;">code for left</div>
<div style="float:right; max-width:50%;">code for right</div>
</div>

这对于任何手机来说都是可怕的，我正在尝试使用 iPhone。似乎第二个 div 内生成的内容超出了可用的屏幕大小或 div 宽度，然后溢出。

有什么方法可以在手机上分屏并在手机上的“左div”下方显示“右div”？

提前致谢

Answer 1

您需要使用媒体查询。

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

示例： http: //jsfiddle.net/Svqt5/ （调整浏览器窗口大小以查看媒体查询工作）

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