CSS if else条件，手机竖屏或横屏

Question

如何使用with-height条件。没有 javascript.

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

我想寻呼移动设备以检测移动设备是旋转为纵向还是横向。

Answer 1

试试这个：

.something {
    background-color: lightblue;
}

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

Answer 2

您可以使用方向约束：

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

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

见MDN。

Answer 3

MDN docs:

orientation

Value: landscape | portrait

Media: visual

Accepts min/max prefixes: no

Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.

Example

To apply a style sheet only in portrait orientation:

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

Note: This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.

Answer 4

您不能使用计算方法，因为计算方法是 css 属性的值而不是属性。

但您可以将媒体规则与最大宽度和最小宽度结合使用（粘贴宽度或高度值而不是 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 */
}

参考这个 reference 我们只有这些。

Answer 5

您也可以将媒体查询与 height 一起使用 -

例如-

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

或者您可以使用方向

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

你也可以使用高度

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

我的一些朋友也 post MDN URL 你可以从那里获得更多信息。

这个answer可能对你有用

CSS if else条件，手机竖屏或横屏

CSS if else conditions, mobile portrait or landscape

css

orientation

media-queries