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

Posted 2023-03-10

【中文标题】使用 HTML 和 CSS 创建横向和纵向布局

【英文标题】：Creating Landscape and Portrait layout using HTML and CSS

【发布时间】：2012-01-06 09:32:10

【问题描述】：

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

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

谢谢 拉克斯

【问题讨论】：

标准流体布局是否不适合您？

【参考方案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 开发是指本地应用程序，那么这将不起作用。对于原生应用程序，您需要使用 cocoa 框架来确定设备的方向。但是，如果您只是在本机应用程序中使用 webview，那么这将正常工作。

希望这会有所帮助。

【讨论】：

注意，有一个专门的媒体语法来检查屏幕是横向还是纵向 - @media (orientation: landscape) ...