區分媒體查詢中的縱向和橫向版本

我已經設置了這些媒體查詢。但是，如何編輯此圖像以爲縱向，橫向版本（例如：iPad，iPhone）設置單獨的媒體查詢？區分媒體查詢中的縱向和橫向版本

@media only screen and (min-width : 1824px) {} 

@media only screen and (min-width: 1200px) and (max-width: 1823px) {}  

@media only screen and (min-width: 992px) and (max-width: 1199px) {} 

@media only screen and (min-width: 768px) and (max-width: 991px) {} 

@media only screen and (max-width: 767px) {} 

@media only screen and (max-width: 480px) {}

來源

2015-06-03 Becky

http://stackoverflow.com/questions/5735467/css-media-queries-is-it-possible-to-detect-portrait-landscape-tablet-mode –

@PhilipDernovoy感謝。但是我無法將'和（orientation：portrait）'放入我的css中。因爲只有@ @media屏幕和（min-width：768px）和（max-width：991px）{}'或'@media屏幕和（max-width：767px）{}'可用於示例一個iPad（1024x768）風景版本。 – Becky

也許這可以幫助你https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ –

我們必須將orientation: portrait和orientation: landscape添加到您的媒體屏幕。

iPad的橫向和縱向

/* iPad Portrait */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1) { 

/* ur CSS */ 
} 

/* iPad Landscape */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) { 

}

對於最新ipad公司使用像素比：2（視網膜顯示）。

-webkit-min-device-pixel-ratio: 2

同樣，對於iPhone的，對於iPhone的你必須設置爲4個不同的屏幕，< iPhone 4S的，iPhone 5S和iPhone 6和6加版本的媒體。

來源

2015-06-03 06:10:35 Prime

@media only screen and (orientation: portrait) {} 

@media only screen and (orientation: landscape) {}

我認爲是你在找什麼。

編輯：

我認爲適合於我的CSS你的意思是這樣的：

@media (max-width: whatever) and (orientation: landscape) {}

如果你問一個建議，當使用portrait或landscape，然後用landscape時視口寬度更大，反之亦然。

max-width: 1024px會設置一個上限值，它不會影響範圍規則：1200px-1823px。

來源

2015-06-03 05:14:41 Mustaghees

謝謝我知道我可以使用和'方向：'做到這一點，但我的問題是我如何適應我的CSS？例如iPad是1024x768，所以我應該使用'和（orientation：landscape）'或'和（orientation：portrait）'而不影響臺式機/筆記本電腦版本？ – Becky

@Becky格式是寬x高，所以1024x768的平均寬度更多。所以你應該使用'景觀' – Mustaghees

因此，如果我做'media（max-width：1024）和（orientation：landscape）{}'不會影響大型桌面和筆記本電腦的現有媒體查詢'@media僅屏幕和（min -width：1200px）和（max-width：1823px）{}'？ – Becky

區分媒體查詢中的縱向和橫向版本

回答

相關問題