Question

我正在使用Joomla 3并编辑应用程序并试图让它与手机兼容。我正在使用一个div容器，其中包含2个div作为actas列，例如：

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

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

1 个答案: