在媒体查询中区分纵向和横向版本 [英] Differentiating portrait and landscape versions in media queries

问题描述

我已经设置了这些媒体查询.但是，我该如何对其进行编辑以针对纵向和横向版本(例如:iPad，iPhone)设置单独的媒体查询?

I've got these media queries set. But how do I edit this to have separate media queries set for the portrait, landscape versions (e.g.: 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) {}

推荐答案

我们必须在您的媒体屏幕上添加orientation: portrait和orientation: landscape.

We have to add orientation: portrait and orientation: landscape to your media screen.

iPad横向和纵向

iPad Landscape and Portrait

/* 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(视网膜显示屏).

For latest iPads use pixel ratio:2 (Retina display) .

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

与iPhone相似，对于iPhone，您必须为4个不同的屏幕设置媒体，< iPhone 4S，iPhone 5S以及iPhone 6和6以及更高版本.

Similarly for iPhone's, for iPhone's you have to set media for 4 different screens , < iPhone 4S , iPhone 5S and iPhone 6 and 6 plus versions.

这篇关于在媒体查询中区分纵向和横向版本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！