Modern Web Engineerinng

[munem15-4873]

Media Queries

CSS3 supports all of the same media types as CSS 2.1, such as screen,
print and handheld, but has added dozens of new media features,
including max-width, device-width, orientation and color. New
devices made after the release of CSS3 (such as the iPad and Android
devices) will definitely support media features. So, calling a media query
using CSS3 features to target these devices would work just fine, and it will
be ignored if accessed by an older computer browser that does not support
CSS3.

In Ethan Marcotte's article, we see an example of a media query in action:
1 <link rel="stylesheet" type="text/css"
2 media="screen and (max-device-width: 480px)"
3 href="shetland.css" />

This media query is fairly self-explanatory: if the browser displays this page
on a screen (rather than print, etc.), and if the width of the screen (not
necessarily the viewport) is 480 pixels or less, then load shetland.css.
New CSS3 features also include orientation (portrait vs. landscape),
device-width, min-device-width and more. Look at "The Orientation
Media Query" for more information on setting and restricting widths based
on these media query features.

One can create multiple style sheets, as well as basic layout alterations
defined to fit ranges of widths — even for landscape vs. portrait
orientations. Be sure to look at the section of Ethan Marcotte's article
entitled "Meet the media query" for more examples and a more thorough
explanation.

Multiple media queries can also be dropped right into a single style sheet,
which is the most efficient option when used:
1 /* Smartphones (portrait and landscape) ----------- */
2 @media only screen
3 and (min-device-width : 320px)
4 and (max-device-width : 480px) {
5 /* Styles */
6 }
7
8 /* Smartphones (landscape) ----------- */
9 @media only screen
10 and (min-width : 321px) {
11 /* Styles */
12 }
13
14 /* Smartphones (portrait) ----------- */
15 @media only screen
16 and (max-width : 320px) {
17 /* Styles */
18 }

The code above is from a free template for multiple media queries between
popular devices by Andy Clark. See the differences between this approach
and including different style sheet files in the mark-up as shown in the post
"Hardboiled CSS3 Media Queries."


Source: Smashing eBook􁴹Modern Web Design and Development