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

Question

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

对于 Android 应用程序(UI 线程)，您通常可以在源代码中放置两个布局...是否有类似的东西可用于 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]
}