3

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

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

我期待什么答案？

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

2 回答 2

14

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

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]
}
于 2012-08-18T13:57:40.133 回答
2

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

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

于 2012-08-18T13:57:13.873 回答