Post

Media Queries

Posted
By Daniel Florido 1 min read

Max width for phones in landscape

1
2

@media (max-width: 736px) {
}

simple

1
2
3

@media (min-width: 375px) {
  padding: 0 50px;
}

Based on:

iPhone 6 in portrait & landscape

1
2
3
4
5

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
}

@media (max-width: 736px) {
}

iPhone 6 in landscape

1
2

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) {
}

iPhone 6 in portrait

1
2

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) {
}

iPhone 6 Plus in portrait & landscape

1
2

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
}

iPhone 6 Plus in landscape

1
2

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: landscape) {
}

iPhone 6 Plus in portrait

1
2

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: portrait) {
}

iPhone 5 & 5s in portrait & landscape

1
2

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
}
This post is licensed under CC BY 4.0 by the author.

Comments powered by Disqus.