Post

Breakpoints and CSS Media Queries

Posted
By Daniel Florido
1 min read

Ultimately you cannot design for all the screen sizes / resolutions listed here.

Pro tip: use google analytics to uncover your audiences most popular screen size and set your artboard size accordingly.

breakpoints

  1. 1920x1080 (Full HD)
  2. 2560x1440 (QHD)
  3. 3840x2160 (4K UHD)
  1. 1366x768 (HD)
  2. 1920x1080 (Full HD)
  3. 2560x1440 (QHD)
  4. 3840x2160 (4K UHD)
  1. 320 x 480
  2. 375 x 667
  3. 414 x 736
  4. 360 x 640
  5. 412 x 846
  6. 375 x 812
  7. 360 x 720
  8. 320 x 568
  9. 414 x 896
  10. 480 x 854

Media Queries

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) {
}
css
This post is licensed under CC BY 4.0 by the author.