桌面和 iPad 横向的媒体查询

Question

所以有两个div如下：

/*for ipad portrait and landscape*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    .aclass {
        display: block;
        background-color: antiquewhite;
    }
    .bclass {
        display: none;
    }
}

/*for medium device*/
@media only screen 
and (min-width : 992px) 
and (max-width : 1200px) {
    .aclass {
        display: none;
    }
    .bclass {
        display: block;
        background-color: aquamarine;
    }
}

<div class="hidden-xs aclass">div 1</div>
<div class="hidden-xs bclass">div 2</div>

我希望aclass 仅应用于 ipad，bclass 应用于桌面等中型设备。由于min-width: 992px 而应用bclass 的Ipad 横向模式出现了问题，但我希望在此处应用aclass。我该如何解决这个问题？

Answer 1

您是否尝试过使用and (orientation: landscape)？这是一个媒体查询约束，仅当设备处于横向模式时才强制执行 CSS 规则。 orientation: portrait 的工作原理相同

Answer 2

您还可以在媒体查询中使用max-height/min-height 和/或max-device-height/min-device-height，并将其与您现有的查询结合使用。