CSS - 不同方向的媒体查询

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 横向****

一切正常现在，当我查看简单 View 时。 CSS 仍在挑选中。我希望媒体只选择横向。

Answer 1

@media(方向:横向)适用于普通桌面显示器(1024 x 768、1440x800 等)。

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

例如。

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

这将适用于所有横向屏幕(包括桌面显示器)

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

这将仅适用于纵向模式下的所有屏幕(纵向模式下的手机、平板电脑)