Media Queries

With CSS3 media queries, you can do just that—create a layout that resizes to accommodate different screen resolutions.

Media queries are the recent design trend called responsive web design. This is when all page elements, including images and widgets, are designed and coded to resize and realign seamlessly and elegantly, depending on the capabilities and dimensions of the user’s browser.

Browser Support

Support for media queries is very good:

■ IE9+ ■ Firefox 3.5+ ■ Safari 3.2+ ■ Chrome 8+ ■ Opera 10.6+ ■ iOS 3.2+ ■ Opera Mini 5+ ■ Opera Mobile 10+ ■ Android 2.1+

Targeting multiple device using Media Queries

1. Create a basic HTML document with a header and some simple content.

snippet

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Solution 8-1</title> 
</head> 
<body> 
    <header> 
        <h1>CSS3 Media Queries</h1></header> 
    <section></section> 
    <footer></footer> 
</body> 
</html>

2. Add the link to the general style sheet meant for every device:

<link href="css/style.css" rel="stylesheet" type="text/css" />

This style sheet contains the style rules you want to apply regardless of the device output.

3. Set the different style rules for the various screen sizes using media queries.

<!-- Smartphones --> 
<link href="css/phone_style.css" rel="stylesheet" type="text/css" 
media="only screen and (max-device-width:320px)" /> 
 
<!-- Tablets --> 
<link href="css/tablet_styles.css" rel="stylesheet" type="text/css" 
media="only screen and (min-device-width:321px) and (max-device-width:768px)" /> 
 
<!-- Desktops --> 
<link href="css/style.css" rel="stylesheet" type="text/css" media="only screen and (min-width:769px)" />

Here you have a style sheet specifically targeting smartphones, another one for digital tablets, and one for desktops (and laptops).

4. Internet Explorer versions 6 through 8 will ignore any media queries and skip the related style rules. So you need to create a style sheet for them using a conditional statement.

<!--[if It IE 9> 
<link href="stylesForIE.css" rel="stylesheet" type="text/css"> 
<![endif]-->

5. Now add a style sheet for older mobile models as well, by using the handled media type:

<!—Older mobile phones --> 
<link href="css/old_mobiles.css" rel="stylesheet" type="text/css" media="handled" />

6. Finally, add the link to the style sheet destined for the print media type:

<!-- Print --> 
<link href="css/printer_style.css" rel="stylesheet" type="text/css" media="print" />

Media on External Stylesheets

If you prefer to have an external style sheet associated with a media query, the syntax is as follows.

<link rel="stylesheet" type="text/css" media=" screen and (width:900px), print, 
			tv { rules to be applied " href="specific_stylesheet.css" />

This style sheet targets the screen media type for a screen with a minimum display width of 900 pixels, and/or paper (on a printer), and/or TV.

Code with Media Query

A media query is a Boolean logical expression (either true or false) used in conjunction with one of the media types. It tests one feature or more of the output device and, if the expression is true, applies the subsequent specified style rules.

@media media type and (criteria targeted) { 
    /*rules that will apply only to the devices fitting those criteria*/ 
} 
 
/*OR-*/ 
 
<link rel="stylesheet" type="text/css" media="media type and (criteria 
                    targeted)" href="specific_stylesheet.css" />

CSS 2.1 Media Queries

Serving different styles for different media types is not new to CSS3. From CSS2.1, you could target several media types and specify how documents are presented in the media types as displayed below.

Media types in CSS2.1

Media Type	Description
`screen`	For color computer screens
`print`	For printed material
`aural/speech`	For speech synthesizers
`braille`	For Braille tactile feedback devices
`embossed`	For paged Braille printers
`tty`	For teletypes, terminals, and other devices with limited display capabilities
`projection`	For projected presentations
`tv`	For televisions and television-like devices
`all`	For all the media types listed above
`handheld`	Intended for handheld devices (typically, devices with small screens and limited bandwidth)

You can target different media types in two ways: Use the @media or @import rules within the style sheet itself as follows:

snippet

@import url("screenStyles.css") screen; 
 
@media print { 
/* style sheet for print goes here */ 
}

You can get the same result within the web document by using the <link> tag, specifying the target media of an external style sheet.

<link href="style.css" rel="stylesheet" type="text/css" media="screen">

As stated by the W3C specification, the screen media type was meant for desktops and laptop computers and the media type used to target mobile devices was the handled.

To define different styles for each of those types of devices, desktops, and mobile devices, you just attach different style sheets like this.

snippet

<link rel="stylesheet" type="text/css" media="screen" href="style.css"> 
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css">

Or, if you want to attach just a single style sheet, you do so as follows

snippet

@media screen { 
/* rules specific for screen devices */ 
} 
@media handheld { 
/* rules specific for handled devices */ 
}

Features of the output device that can be tested in CSS3 using media queries.

Feature	Description	Value Min/Max	Prefixes
`width`	Width of the display area of the output device	Integer expressing pixels, cm or em depending on the media type (for example, width:300px).	Yes
`height`	Height of the display area of the output device.	Integer	Yes
`device-height`	Height of the rendering surface of the output device	Integer	Yes
`device-width`	Width of the rendering surface of the output device	Integer	Yes
`orientation`	Orientation of the output device	Portrait or landscape	No
`aspect-ratio`	Ratio of the width to the height	Integer/integer (for example,16/9).	Yes
`device-aspect-ratio`	Ratio of the device width to the device height	Integer/integer (ex:16/9).	Yes
`color`	The number of bits per color component of the output device	Integer. If there’s no color, the value is 0.	No
`color-index`	Number of entries in the color lookup table of the output device	Integer	No
`monochrome`	Number of bits per pixel in a monochrome frame buffer	Integer	No
`resolution`	Density of pixels of the output device	Integer value in dots per inch (dpi)—for example, resolution: 300dpi).	Yes
`scan`	Scanning process of TV output devices	Progressive or interlace.	No
`grid`	Query whether the output device is grid or bitmap	0 for grid; 1 for bitmap.	No

■ Media query with the logical operator and:

@media only screen and (device-width:900px) { 
/* rules to be applied */ 
}

This code example targets screen devices only, with an exact device width of 900 pixels.

Points to remember

If you decide to use different external style sheets depending on your media queries, keep in mind that browsers, including mobile ones, will load all the style sheets whether they’re needed or not for the current output device and scenario. In terms of performance and to limit the number of HTTP requests, it’s usually better to have all your styles and media queries in a single style sheet. Note: Older browsers ignore the. only keyword and won’t read this kind of query. ■ Media query with the logical operators and and not:

@media screen and (not device-width:900px) { 
/* rules to be applied */ 
}

This code example targets any screen for which the exact device width is not 900 pixels. ■ Media query with the equivalent of the OR operator:

@media projector and (color), screen and (color) { 
/* rules to be applied */ 
}

This code example targets a projector or a screen that has color capabilities. ■ Media query with the and operator, the min– prefix, and the equivalent of the OR operator:

@media screen and (min-width:900px), print, tv { 
/* rules to be applied */ 
}

This code example targets the screen media type for a screen with a minimum display width of 900 pixels, and/or print devices (setting style rules for a printed version of your web content), and/or TV. In the preceding examples, the media queries are written as they would appear inside a single style sheet.