Introduction to CSS3 Media Queries

It’s hard to get away from the discussion of Media Queries and Responsive Design in the CSS community, but if you aren’t quite sure what they are, or simply don’t know how to use them then this is the guide for you.

If you’ve ever wanted to create a stylesheet for specific devices (smartphones, tablets, desktop computers), you can learn how below.

What are Media Queries?

Media Queries allow you to style elements for specific devices using attributes like resolution, aspect ratio, orientation and color index.

Using a CSS3 Media Query

To assemble the right query, you want to identify characteristics of the device(s) browser or hardware by combining media features, let’s familiarize ourselves with a few of them.

Attributes

device-width

The device-width feature targets the width display area (screen size) of devices. In print media, this feature targets the width of a sheet of a paper.

device-height

The device-height feature targets the height of the display area (screen size) of devices. In print media, this feature targets the height of a sheet of a paper.

resolution

Queries that use the resolution feature target a screen’s resolution in dots per inch (DPI) or dots per centimeter (DPCM).

orientation

The orientation media feature describes devices that use either a landscape or portrait orientation. If the height of a devices screen or sheet of paper is higher than or equal to its width, then the orientation is portrait. When the width is greater than the height, the orientation is landscape.

A full list of attributes and their definitions can be found in the W3C’s media query candidate document.

Media Query Examples

Let’s take a look at a few real-world examples of apply certain rules to specific devices.

Apple iPhone 4

If you wanted to create a stylesheet specifically for an Apple iPhone 4 (which has a resolution of 960x640px) and give your site a font-size of 14px, you could import the stylesheet using a media query of device-width: 960px and device-height: 640px, as seen below.

<link rel="stylesheet" media="screen and (device-width: 960px) and (device-height: 640px)" href="iphone4-style.css">
<!-- OR -->
<style type="text/css">
@media screen and (device-width: 960px) and (device-height: 640px) {
    body {
        font-size: 14px;
    }
}

Obviously, that query is also going to style ANY device that has a resolution of 960×640. Another way to target a device’s screen dimensions is by using the min-device-width and max-device-width. By using the min and max prefixes, you can target devices in a specific range of resolution sizes:

<link rel="stylesheet" media="screen and (min-device-width: 480px) and (max-device-width: 960px)" href="width-480-960-style.css">
<!-- OR -->
@media screen and (min-device-width: 480px) and (max-device-width: 960px) {
    #header {
        display: none;
    }
}

The query above will target any device whose screen is between 480px and 960px wide, and hide any elements where id="header".

Apple iPad

Many tablets (and even smartphones now) allow you to browse the Web in either portrait or landscape orientation by simply rotating the device. The iPad and iPad 2 have resolutions of 132 pixels per inch. Let’s create a rule that applies to the iPad ONLY while it’s in the landscape orientation.

<link rel="stylesheet" media="screen and (orientation: landscape) and (resolution: 132ppi)" href="ipad-landscape-900px-width.css">
<!-- OR -->
@media screen and (orientation: landscape) and (resolution: 132ppi) {
    #wrapper {
        width: 900px;
    }
}

Conclusion

Now that you have a basic understanding of media queries in CSS3, you can move on to creating specialized stylesheets for each type of device, or even individual makes and models as demonstrated above.