Which are the most important media queries to use in creating mobile responsive design?

Question

There are a lot different media queries for mobile screen sizes. It can be overwhelming to accomodate all of them when designing a responsive mobile site. Which are the most important ones to use when designing for mobile? I found this article that does a pretty good job of outlining the available media queries: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/.

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Answer 1

I'd recommend taking after Twitter's Bootstrap with just these four media queries:

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

Edit: The original answer (above) was taken from Bootstrap version 2. Bootstrap has since changed their media queries in version 3. Notice that is there is no explicit query for devices smaller than 768px. This practice is sometimes called mobile-first. Everything outside of any media query is applied to all devices. Everything inside a media query block extends and overrides what is available globally as well as styles for all smaller devices. Think of it as progressive enhancement for responsive design.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Check it out on Bootstrap 3's docs.

Answer 2

1. Design in percentages and initially optimized for a 15"+ screen.

2. Review what components you want to see on a phone - just keep essential content and remove elements that don't work or clutter the small screen. These styles can be contained within @media (max-width: 480px) { ... }

3. As things move to 10" or less, redesign your buttons and interactive components for fingers rather than mouse. @media (max-width: 767px) { ... }

4. Shrink the width of your browser. When things don't look so good, get in to the console and figure out what styles can be changed or items that need to be redesigned or removed. Mark what screen width they occur at and create a media query.

5. At the end, review your media queries to see if some of them can be grouped together (ie if you have one at 750 and 767 pixels width, you might just as well with combining them in the 767).

If you are comfortable w jQuery you can add

$(window).resize(function(){
  console.log($(window).width());
}); 

to get the current screen size. Add a few extra pixels for good measure.

Answer 3

The first Twitter Bootstrap code referenced by @cjlarose assumes that you've built your main CSS for a display that is between 980px and 1200px wide, so you're essentially starting with the desktop design and adapting all of the others from it.

I'm glad to see Twitter has changed to "mobile first" in Bootstrap 3. It's one of the most popular approaches to media queries, and the way I prefer to do it. You start from the smallest size rather than from the desktop out.

Note that your particular site may need different queries than what are listed there or on any other list. You should add queries as your content demands, not based on any set template.

Here are some media queries I've found most useful. These are just some examples:

/* Start with baseline CSS, for the smallest browsers. 
   Sometimes I put this into a separate css file and load it first.
   These are the "mobile first" styles. */

...


/* Then progressively add bigger sizes from small to large */

/* Smartphones start somewhere around here */
@media (min-width: 300px) {
}

/* You might do landscape phones here if your content seems to need it */
@media (min-width: 450px) {
}

/* Starting into tablets somewhere in here */
@media (min-width: 600px) {
}

/* Perhaps bigger tablets */
@media (min-width: 750px) {
}

/* Desktop screen or landscape tablet */
@media (min-width: 900px) {
}

/* A bit bigger if you need some adjustments around here */
@media (min-width: 1100px) {
}

/* Widescreens */
@media (min-width: 1500px) {
}

The most important thing is that you may not need all of these, or you might want to change the numbers depending on what your content looks like. I don't think there are any really hard rules about how many or where to put your breakpoints. I'm doing a site right now that happens to only need one breakpoint because the content is pretty simple, but I've also done sites that look more like the code above.

I didn't include the retina display code. That's useful if you're switching out normal-resolution images for high-resolution images on hi-res displays, but otherwise it's not really that useful.