CSS if else 条件，移动纵向或横向[重复]答案

【问题标题】：CSS if else conditions, mobile portrait or landscape [duplicate]CSS if else 条件，移动纵向或横向[重复]
【发布时间】：2016-12-15 07:24:08
【问题描述】：

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

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

我想查找移动设备以检测移动设备是否旋转为纵向或横向。

【问题讨论】：

标签： css media-queries orientation

【解决方案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。

【讨论】：

有人可以说如何在Safary浏览器中使用类似的css代码：
@media (min-width: 150vh) { .imageMap { height: 100%;宽度：150vh；背景颜色：浅蓝色； } }
@media (max-width: 150vh) { .imageMap { 宽度: 100%;高度：66vw；背景颜色：浅灰色； } }

【解决方案2】：

您也可以通过height 使用媒体查询 -

例如-

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

或者你可以使用 orientation

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

你也可以使用 with height

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

我的一些朋友还发布了 MDN URL，您可以从中获取更多信息。

这个answer可能对你有用

【讨论】：

【解决方案3】：

试试这个：

.something {
    background-color: lightblue;
}

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

【讨论】：

【解决方案4】：

MDN docs:

方向

值：风景 |肖像

媒体：视觉

接受最小/最大前缀：无

表示视口是否为横向（显示更宽比它高）或纵向（显示器比它高）模式。

示例

仅在纵向应用样式表：

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

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

【讨论】：

【解决方案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 */
}

请参考reference，这就是我们所拥有的。

【讨论】：