What type of media should be used in responsive web design?

Question

I see that some use “only screen” in media queries, others use “everything”, others use “screen and print”, others use “screen” (without “only”), others do not indicate media type.

I do not intend to use special CSS for printing or other media. Should I use "screen only". Should media type be indicated?

What type of media is used by most people and why?

Answer 1

Basically:

• Either use media="screen" to apply the main stylesheet to all browsers, or just ignore the media attribute if you don't like printing

• Use media="print" to apply your print style sheet if you care about printing.

• If you want, include the only keyword only for multimedia queries such as screen and (max-width: 1000px) for your sensitive styles (there is no right, wrong or standard here)

The only keyword was introduced primarily to prevent older browsers from using stylesheets designed for other devices, such as modern browsers on smartphones and tablets. See Media Queries Specification .

Do not use media="only screen" for your main stylesheet. If you do, IE8 and later will completely ignore your main stylesheet, and your site will be displayed unchanged in these versions.

---

For some background: the HTML 4 specification asks what the “type” media (or media descriptors) looks like:

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

Must deal with the and ... part ignored, so it will be equivalent to this:

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

The value will be used in older browsers that do not support CSS3 multimedia queries, but fully support CSS2 media types. This can cause unwanted side effects, for example. Mobile style sheet is used in older desktop browsers.

In my experience, however, this never happened; as far as I know, IE7 and IE8 just consider screen and (max-width: 1000px) as an invalid media descriptor and generally ignore this stylesheet.

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

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

Answer 2

IMO is easier and more efficient to put all styles in one style sheet:

 <link rel=stylesheet href="style.css"> 

Then you can override when you go up:

 /* put mobile-friendly first (before media queries) */ @media screen and (min-width:481px) { /* ... */ } @media screen and (min-width:961px) { /* ... */ } @media print { /* print-specific overrides */ } 

Checkout H5BP and 320 and above .

You can use screen or all . If you add things like background images that apply only to screens, then it definitely makes sense to use screen . For real basic things, this is not a big deal.