CSS的if else条件语句，移动设备的横屏或竖屏模式。

Question

如何使用具有高度条件的元素。无需 JavaScript。

@media (calc(window-width > window-height)) {
    background-color: lightblue;
}
@media (calc(window-width <= window-height)) {
    background-color: lightgray;                
}

我希望为移动设备创建一个页面，用于检测手机是否旋转到了竖屏或横屏。

- user2301515

Answer 1

你可以使用orientation约束：

@media (orientation: landscape) {
    /* applies to devices in landscape mode */
}
@media (orientation: portrait) {
    /* applies to devices in portrait mode */
}

多个规则用逗号分隔（OR），否则使用AND。

请参阅MDN。

- andreas

---

有人能说一下如何在Safari浏览器中使用类似以下的CSS代码吗： - user2301515

@media (min-width: 150vh) { .imageMap { height: 100%; width: 150vh; background-color: lightblue; } } - user2301515

@media (max-width: 150vh) { .imageMap { width: 100%; height: 66vw; background-color: lightgray; } } - user2301515

Answer 2

试试这个：

.something {
    background-color: lightblue;
}

@media (orientation: landscape) { 
    .something {
        background-color: lightgray;
    }
}

- Daniel Rossko Rosa

Answer 3

您可以使用 height 媒体查询 -

例如 -

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
  ...
}

或者您可以使用方向一起使用。

@media (min-width: 700px) and (orientation: landscape) { ... }

你也可以使用 height 属性

@media (max-height: 700px), handheld and (orientation: landscape) { ... }

我的一些朋友也会发布MDN链接，你可以从中获得更多信息。

这个答案对你有用。

- Mukul Kant

Answer 4

MDN文档:

方向

值: landscape | portrait

媒体类型: visual

接受min/max前缀: no

指示视口是否处于横向模式（显示器比高更宽）或纵向模式（显示器比宽更高）。

示例

仅在纵向方向应用样式表：

@media all and (orientation: portrait) { ... }

注意: 此值与实际设备方向不对应。在大多数设备上，打开软键盘会导致视口变得比高更宽，从而使浏览器使用横向样式而不是纵向样式。

- RussAwesome

Answer 5

无法使用calc方法，因为calc方法是CSS属性值而不是属性。

但是可以结合媒体规则和max-width以及min-width（将宽度或高度值粘贴到xxx处）：

@media(max-width:xxx) and (min-width: xxx){}
@media(min-width:xxx) and (max-height: xxx){}

你还可以使用更高级的媒体查询，类似于这样：

@media all and (max-width: xxx) and (min-width: xxx), (min-width: xxx) {}

如果您想处理纵向和横向的内容，可以像这样操作：

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

请参考这个参考文献，这是我们唯一拥有的。

- Bhojendra Rauniyar