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

Answer 1

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.