Question

我想创建一个我的网站的移动版本（网络社区）。当我开始时，我刚刚注意到这个问题，显示元素的位置对于水平屏幕和垂直屏幕应该是不同的。如果设备转向，它甚至应该（如果可能的话）切换。目的是编写一个普通的网页（HTML，CSS，JavaScript），同时尽可能避免使用JavaScript

对于Android应用程序（UI-Thread），您通常可以在源代码中放置两个布局...是否有类似的CSS可用？

我期待什么答案？

如果可能的话，一些CSS示例如何做到这一点。
附加：一些方便的教程，用于创建现有页面的移动版本，您认为这些有用（但主要关注的是屏幕水平/垂直）......

Answer 1

似乎我在“标记”之后找到了答案，因此找到了正确的搜索字词：

http://www.mollerus.net/tom/blog/2010/04/screen-orientation_and_css.html

链接不同的CSS文件：

<link rel="stylesheet"
      media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet"
      media="all and (orientation:landscape)" href="landscape.css">

或者在样式表中放置这样的CSS：

@media all and (orientation:landscape) {
   [styles for landscape orientation]
}

@media all and (orientation:portrait) {
   [styles for portrait orientation]
}

Answer 2

您正在寻找的是“响应式网页设计”。这允许您在css中 - 检测布局，在布局更改时触发javascript事件，并根据屏幕的宽度/高度定位CSS元素。

我可以推荐这个幻灯片作为一个很好的起点：http://johnpolacek.github.com/scrolldeck.js/decks/responsive/

使用CSS（无JavaScript）自动切换水平/垂直设计？

2 个答案: