CODEWITHSUNDEEP
htmlcssmedia-queries
Becky
Becky

Reputation: 5595

Differentiating portrait and landscape versions in media queries

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) {}

Upvotes: 0

Views: 1331

Answers (2)

Prime
Prime

Reputation: 3625

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

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) {

}

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

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

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.

Upvotes: 0

Mustaghees
Mustaghees

Reputation: 526

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

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

I think thats what you are looking for.

Edit:

I think by fit in to my css you mean this:

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

If you are asking for a suggestion that when to use portrait or landscape, then use landscape when width of viewport is more and vice versa.

max-width: 1024px will set an upper limit and it will not interfere with rules for range: 1200px-1823px.

Upvotes: 1

Related Questions