媒體查詢用於桌面和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和桌面，即768px。無法區分。 –

媒體查詢用於桌面和iPad的景觀

回答

相關問題