使用HTML和CSS创建横向和纵向布局 [英] Creating Landscape and Portrait layout using HTML and CSS

问题描述

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

我的问题是什么是最好的方法来实现？
有两个不同的html / css文件并加载它们有意义，这取决于设备的方向，或有任何其他方法来实现这一点。

感谢
Raaks

解决方案>

您想要使用响应式网页设计来实现这一点。您可以根据屏幕的大小确定要应用的样式。请记住，当在纵向视图中时，屏幕更宽。

你所做的就是创建两个不同的样式表。一个用于当它在肖像和第二个为景观。然后，您使用CSS3媒体查询在两者之间切换。

示例代码：

p>

 < link rel =stylesheettype =text / cssmedia =screen and（max-device-width：768px ）href =portrait.css/> 
  

风景：

 code>< link rel =stylesheettype =text / cssmedia =screen and（min-device-width：1024px）href =landscape.css/> 
  

正如你所看到的，你正在传递目标媒体并为每个样式表声明一个目标宽度。仅当屏幕的当前宽度小于或等于768像素时，才应用纵向样式表。相反，只有屏幕分辨率最小为1024像素宽时，才会应用第二个样式表。

一个简单的教程描述技术。

描述该技术的原始A List Apart文章。

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

希望这有助于。

I have got a requirement where I need to write a HTML/CSS, which should display Landscape and Portrait, depending upon the orientation of the iPad, that is initially I want to write this using HTML and CSS and then later use it for the iPad developement.

My question is what is the best way to achieve this? Does it make sense to have two different html/css files and load them depending on the orientation of the device or is there any other way to implement this. Any information regarding this would be appreciated.

Thanks Raaks

解决方案

You want to look at using responsive web design to achieve this. You can determine what styles to apply depending on the size of the screen. Remember, the screen is wider when it's in portrait view.

What you do is, you create two different stylesheets. One for when it's in portrait and the second for landscape. Then, you use CSS3 media queries to switch between the two.

Sample code:

Portrait:

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

Landscape:

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

As you can see, you are passing the target medium and declaring a target width for each stylesheet. The portrait stylesheet will only be applied if the screen's current width is less than or equal to 768 pixels. Conversely, the second stylesheet will only be applied if the screen resolution is a minimum of 1,024 pixels wide.

A simple tutorial describing the technique.

The original A List Apart article describing the technique.

Now if by iPad development, you mean native applications then this will not work. For native applications, you need to use the cocoa framework to determine the device's orientation. However, if you are simply using a webview in a native application then this will work fine.

Hope this helps.

这篇关于使用HTML和CSS创建横向和纵向布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！