同一HTML页面的横向和纵向设计

Landscape and portrait design of same HTML page

本文关键字：横向 HTML 同一      更新时间：2023-09-26

我需要为我的web应用程序创建两个版本(例如，只有一个HTML页面):一个用于横向(宽视图)和一个用于纵向(高视图)。但我需要像在iPad中那样运行这两个;当在纵向模式下，纵向版本应该工作，如果模式是横向，那么横向版本。

我在某个地方读到过，但不确定。我可以用一个HTML文件和两个CSS文件制作应用程序吗?

在Google上查看响应式网页设计。我的应用程序使用Twitter的Bootstrap项目，但方法非常明显:您根据设备的当前宽度定义CSS。宽度变了，CSS也变了。

http://twitter.github.com/bootstrap/scaffolding.html响应

对于CSS3和媒体查询，查看这篇文章:

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

可以是这样的:

/* iPads (landscape-wide) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}
 /* iPads (portrait-tall) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

需要一些研发…

希望能有所帮助

相关文章：