CSS如果其他条件，移动纵向或横向[重复]

Question

如何在高度条件下使用。没有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 screen and (max-width: 995px) , screen and (max-height: 700px) {
  ...
}

或者，您可以使用with-orientation

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

你也可以和身高搭配使用

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

我的一些朋友也发布了MDN网址，你可以从中获得更多信息。

这个答案可能对你有用

Answer 3

可以使用方向约束：

@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。