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.

    <meta charset="utf-8"> 
    <title>Solution 8-1</title> 
        <h1>CSS3 Media Queries</h1></header> 

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"> 

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*/ 
<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 TypeDescription
screenFor color computer screens
printFor printed material
aural/speechFor speech synthesizers
brailleFor Braille tactile feedback devices
embossedFor paged Braille printers
ttyFor teletypes, terminals, and other devices with limited display capabilities
projectionFor projected presentations
tvFor televisions and television-like devices
allFor all the media types listed above
handheldIntended 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:

@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.

<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

@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.

FeatureDescriptionValue Min/MaxPrefixes
widthWidth of the display area of the output deviceInteger expressing pixels, cm or em depending on the media type (for example, width:300px).Yes
heightHeight of the display area of the output device.IntegerYes
device-heightHeight of the rendering surface of the output deviceIntegerYes
device-widthWidth of the rendering surface of the output deviceIntegerYes
orientationOrientation of the output devicePortrait or landscapeNo
aspect-ratioRatio of the width to the heightInteger/integer (for example,16/9).Yes
device-aspect-ratioRatio of the device width to the device heightInteger/integer (ex:16/9).Yes
colorThe number of bits per color component of the output deviceInteger. If there’s no color, the value is 0.No
color-indexNumber of entries in the color lookup table of the output deviceIntegerNo
monochromeNumber of bits per pixel in a monochrome frame bufferIntegerNo
resolutionDensity of pixels of the output deviceInteger value in dots per inch (dpi)—for example, resolution: 300dpi).Yes
scanScanning process of TV output devicesProgressive or interlace.No
gridQuery whether the output device is grid or bitmap0 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.
Related Tutorial
Follow Us #
Contents +