css - 桌面和 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

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