使用HTML和CSS创建横向和纵向布局

Question

我有一个需求，我需要编写一个HTML/CSS，它应该显示横向和纵向，这取决于iPad的方向，最初我想写这个使用HTML和CSS，然后将其用于iPad开发。

我的问题是达到此目的的最佳方法是什么？ 有两种不同的html/css文件并根据设备的方向加载它们是否有意义，或者是否有任何其他方式来实现这一点。任何有关这方面的信息将不胜感激。

感谢 Raaks

Answer 1

你想看看使用自适应网页设计来实现这一目标。您可以根据屏幕的大小确定要应用的样式。请记住，纵向视图时屏幕更宽。

你所做的是，你创建两个不同的样式表。一个用于纵向拍摄，另一个用于横向拍摄。然后，您使用CSS3媒体查询在两者之间切换。

样品的编号：

人像：

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 768px)" href="portrait.css" /> 

景观：

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 1024px)" href="landscape.css" /> 

正如你可以看到，要传递目标媒体和声明对于每个样式表的目标宽度。只有当屏幕的当前宽度小于或等于768像素时，才会应用纵向样式表。相反，第二个样式表仅适用于屏幕分辨率最小为1,024像素宽的情况。

A simple tutorial describing the technique.

The original A List Apart article describing the technique.

现在，如果通过iPad的发展，你的意思是本机应用程序，那么这将无法工作。对于本地应用程序，您需要使用可可框架来确定设备的方向。但是，如果你只是在本地应用程序中使用webview，那么这将工作得很好。

希望这会有所帮助。