媒体查询用于桌面和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。我该如何解决这个问题？

来源

2017-09-14 Priyatam Roy

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

来源

2017-09-14 10:45:46 Johannes

工作原理相同ipad（横向模式）和桌面（即768px）的设备高度相同。无法区分。 –

还有另一个答案，但我不知道它是否仍然适用：https://stackoverflow.com/a/9504571/5641669 – Johannes

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

来源

2017-09-14 10:46:42 Ryan

是的，我试过。但是它并不能阻止bclass被应用 –

然后或许尝试@Johannes的解决方案并使用'min-device-height'和'max-device-height'。然后结合，直到他们工作。 – Ryan

媒体查询用于桌面和iPad的景观

回答

相关问题