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

试试这个：

.something {
    background-color: lightblue;
}

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

Answer 3

MDN docs：

<强>取向

价值：风景|肖像

媒体：视觉

接受最小/最大前缀：否

指示视口是否为横向（显示范围更宽）   比它高）或肖像（显示器比它宽）   模式。

示例

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

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

注意：此值有效   不符合实际的设备方向。打开软键盘   在纵向方向的大多数设备上将导致视口   变得比它高，从而导致浏览器使用   风景而不是肖像。

Answer 4

您不能使用calc方法，因为calc方法是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) { ... }

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

此answer对您有用

CSS if else条件，移动肖像或横向

5 个答案: