Question

所以有两个div如下：

＆＃13;

/*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;
    }
}

＆＃13;

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

＆＃13;

我希望{i}仅应用于aclass，而bclass应用于桌面等媒体设备。问题出现在Ipad格局模式中，因bclass而应用了min-width: 992px，但我想在此处应用aclass。我该如何解决这个问题？

Answer 1

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

Answer 2

您是否尝试过使用and (orientation: landscape)？这是一种媒体查询约束，仅在设备处于横向模式时才强制执行CSS规则。适用于orientation: portrait

桌面和iPad环境的媒体查询

2 个答案: