CSS如果其他条件，移动肖像或景观

Question

如何使用具有高度的条件。没有javascript。

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

我想为移动防御网页，以检测移动是旋转到肖像或景观。

Answer 1

您可以使用方向约束：

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

您也可以在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) { ... }

我的一些朋友也发了MDN，你可以从那里得到更多的信息。

这个回答对你很有用

Answer 3

试试这个：

.something {
    background-color: lightblue;
}

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