Question

我正在尝试编写媒体查询

喜欢

@media only screen 
and (min-device-width : 980px) and (max-device-width : 1024px) and (orientation : landscape) {
.login-details .offset2 li.first a {
            margin: 6% 19% 0;
    }

}

哪个工作正常

现在出现问题

当我使用 crtl + shift + M

使用firefox时

**** 980 * 1280，横向****

工作正常现在，当我检查简单的视图。 CSS仍然在挑选。我希望媒体只选择风景。

Answer 1

@media（orientation：landscape）适用于普通桌面显示器（1024 x 768,1440x800等）。

您在此块中应用的样式将适用于桌面，但在纵向模式下不适用于设备。

例如。

@media (orientation : landscape) {
  body {
    background-color:red;
  }
}

这将适用于横向的所有屏幕（包括桌面显示器）

@media (orientation : portrait) {
    body {
        background-color:blue;
    }
}

这仅适用于纵向模式下的所有屏幕（手机，平板电脑处于纵向模式）

CSS - 不同方向的媒体查询

1 个答案: