Media Queries: How to target desktop, tablet, and mobile?

by

IMO these are the best breakpoints:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Edit: Refined to work better with 960 grids:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

In practice, many designers convert pixels to ems, largely because ems afford better zooming. At standard zoom 1em === 16px, multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

In response to the comment, min-width is standard in “mobile-first” design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens.

Regardless of whether you prefer min-, max-, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.

More Related Contents:

  1. Common breakpoints for media queries on a responsive site
  2. @Media min-width & max-width
  3. Which are the most important media queries to use in creating mobile responsive design?
  4. Can media queries resize based on a div element instead of the screen?
  5. What is the difference between max-device-width and max-width for mobile web?
  6. What is the difference between “screen” and “only screen” in media queries?
  7. Twitter Bootstrap 3: how to use media queries?
  8. CSS @media print issues with background-color;
  9. CSS media queries: max-width OR max-height
  10. Nesting @media rules in CSS
  11. What are the rules for CSS media query overlap?
  12. What does @media screen and (max-width: 1024px) mean in CSS?
  13. Does css hover work on mobile devices?
  14. CSS specificity, Media Queries and min-width
  15. CSS media queries – Order matters?
  16. Extending selectors from within media queries with Sass
  17. Responsive css styles on mobile devices ONLY
  18. Media query not working in IE9
  19. Bootstrap 3 Slide in Menu / Navbar on Mobile [closed]
  20. IE7, IE8 support for css3 media query [duplicate]
  21. Max-Width vs. Min-Width
  22. How to make responsive table [closed]
  23. iPhone X / 8 / 8 Plus CSS media queries
  24. How can I avoid media query overlap?
  25. Single vs multiple stylesheets in responsive web design
  26. @import styles not working in a media query
  27. Media queries and background images
  28. CSS background-position not working in Mobile Safari (iPhone/iPad)
  29. @media query not working in mobile. Works fine in Chrome
  30. How to detect the device orientation using CSS media queries?

Leave a Comment