基于纵向或横向屏幕大小的css扩展？

我有两个浮在一起的潜水艇。我想让它有一个100像素的宽度，当你在纵向模式下看它，让我们说200像素在横向。这种情况实际上发生在移动设备上

因此，div在横向模式下会扩展，在纵向模式下会缩小一点

---

有什么想法吗？

这在CSS2中是不可能的，但是可以用Javascript做你想做的事情（读取屏幕大小等）

我不确定您正在研究什么技术，但CSS3提供了您想要的技术

有了CSS3，您可以享受这样的乐趣（或者您甚至可以指定宽度，例如200px）：

查看更多解释，或者

---

编辑就因为我今天找到了这个页面：-写得很好。

你可以使用css媒体功能“定向”来完成这项工作。通过这种方式，您可以根据屏幕方向指定样式，而与屏幕大小无关。您可以找到关于此媒体功能的官方w3.org定义。结合这方面的规范将解释它是如何工作的

---

引用w3.org关于“定向”媒体功能的内容：

当 “高度”媒体功能大于或等于 “宽度”“媒体功能。否则，“方向”就是“景观”

developer.mozilla.org关于“定向”功能的注释/引用：

注意：此值（即纵向或横向）不符合实际的设备方向。 在大多数设备上以纵向方向打开软键盘将 使视口变得比其高度更宽，从而导致 浏览器允许使用横向样式而不是纵向样式

---

因此，重申一下，触发纵向或横向媒体查询的实际上不是屏幕方向。然而，这是屏幕的高度和宽度之间的比率！因此，在非移动/触觉设备上使用“定向功能”也是有意义的，因此我添加了一个小演示来展示这些媒体查询的行为

（尝试调整视图端口的大小）

以下是影响纵向和横向的代表性媒体查询

 @media screen and (orientation:portrait) {
     /* Portrait styles */
     /*set width to 100px */

 }
 @media screen and (orientation:landscape) {
     /* Landscape styles */
     /* set width to 200px*/

 }

---

简单而优雅的方式。。为你竖起大拇指！

 @media screen and (orientation:portrait) {
     /* Portrait styles */
     /*set width to 100px */

 }
 @media screen and (orientation:landscape) {
     /* Landscape styles */
     /* set width to 200px*/

 }