Which Are the Most Important Media Queries to Use in Creating Mobile Responsive Design

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

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.

What are the best CSS Media Queries to act as a catch-all for the most common types of devices?

In retrospect, I admit that this question I asked is broad as well as a bit vague. This is partly due to me not keeping up-to-date with the latest trends in front-end design, as well as a misunderstanding and misconceptions of the art and science around responsive web design.

However, I argue that this question should remain (if not on Stack Overflow, at least on somewhere more relevant on the Stack Exchange network), as the comments I have received have helped me a lot to better understand the fundamentals of how to actually implement a responsive design, and could also be beneficial to others in a similar situation.

Although there is no black-and-white answer to my question, thanks to those who have commented, I think that the best guidelines for responsive web design in general, are to:

• focus on the project specifics
• design with the content itself in mind

(Both points suggested in the comments by CBroe.)

I have also found the following articles helpful:

• Justin Avery: “Why you don’t need device specific breakpoints”
• Google Developers: “How to choose breakpoints”
• Nick La: “Setting Breakpoints in Responsive Design”

I also think that these articles from A List Apart, although published in 2000 and 2010 respectively, are excellent resources – both help you to understand the fundamental philosophy behind responsive web design:

• John Allsopp: “A Dao of Web Design” (2000)
• Ethan Marcotte: “Responsive Web Design” (2010)

What media type should I use in Responsive Web Design?

Basically:

• Either use media="screen" for applying your main stylesheet to all browsers, or just leave out the media attribute altogether if you don't care about print

• Use media="print" for applying your print stylesheet if you do care about print

• If you'd like, include the only keyword only for media queries like screen and (max-width: 1000px) for your responsive styles (there isn't any right, wrong or standard to follow here)

The only keyword was introduced mainly to stop older browsers from applying stylesheets intended for other devices, like modern browsers on smartphones and tablet computers. See the Media Queries spec.

Do not use media="only screen" for your main stylesheet. If you do, IE8 and older will completely ignore your main stylesheet, and your site will appear unstyled in those versions.

---

For some background: the HTML 4 spec asks that media "types" (or media descriptors) like this:

<link rel="stylesheet" media="screen and (max-width: 1000px)" href="resp.css">

Should be parsed with the and ... part ignored, so it would be equivalent to this:

<link rel="stylesheet" media="screen" href="resp.css">

Meaning it would apply in older browsers that don't support CSS3 media queries, but do fully support CSS2 media types. This may cause unwanted side effects, e.g. a mobile stylesheet being applied in older desktop browsers.

In my experience, however, this has never happened; as far as I'm aware, IE7 and IE8 simply treat screen and (max-width: 1000px) as an invalid media descriptor and ignore that stylesheet altogether.

But I like to be on the safe side, and put the only keyword in media queries intended specifically for use by modern browsers.

Of course, this rule has been changed in HTML5 in order to be compatible with media queries in CSS3. It just won't apply to older browsers that were released before work on HTML5 began.

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

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.

multiple media queries declaration on responsive design

Use the following :-

@media (max-width: 480px) {
    #something{display:none !important;
}

Responsive Design

I'm always starting with this mediaquery template:

/* 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 */
}

---

Related Topics