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.