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

Question

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

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

我期待什么答案？

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

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]
}