媒体查询用于桌面和iPad的景观
因此,有如下的两个div:媒体查询用于桌面和iPad的景观
/*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
在像桌面媒体设备应用。问题出现在Ipad风景模式中,bclass
因为min-width: 992px
而被应用,但我想在这里应用aclass
。我该如何解决这个问题?
您还可以使用在媒体查询max-height
/min-height
和/或max-device-height
/min-device-height
和结合起来,与您现有的查询。
您是否尝试过使用and (orientation: landscape)
?这是一个媒体查询约束,只有在设备处于横向模式时才会执行CSS规则。对于orientation: portrait
是的,我试过。但是它并不能阻止bclass被应用 –
然后或许尝试@Johannes的解决方案并使用'min-device-height'和'max-device-height'。然后结合,直到他们工作。 – Ryan
设备高度是相同的iPad和桌面,即768px。无法区分。 –
工作原理相同ipad(横向模式)和桌面(即768px)的设备高度相同。无法区分。 –
还有另一个答案,但我不知道它是否仍然适用:https://*.com/a/9504571/5641669 – Johannes