Using CSS3 Media Queries

SueSmith

Jun 05, 2013

It goes without saying that website visitors are now browsing on a wider range of device types than ever before. The need to cater to this variety is difficult to overstate. As the selection of browsing devices continues to increase, taking a responsive approach to Web design is becoming an unavoidable reality. However, implementing a responsive strategy in your new and existing sites doesn't need to be an intimidating prospect.

With CSS3 media queries, you can create Web page designs that are responsive to the user environment without having to create separate versions of your sites. With a basic element of CSS3 media query code in your pages, you can serve the same content to users on mobile and desktop, with layouts and styling tailored to the devices in question. However, rather than targeting particular devices, CSS3 media queries target the relevant properties of the devices, making them more efficient and easier to maintain than some of the older techniques.

CSS3 media queries allow you to test for properties such as screen size and orientation. This removes the need to use such troublesome techniques as JavaScript browser sniffing, significantly reducing the amount of development time you need to dedicate to your site's responsiveness. In this article we will run through the basics of serving responsive styling to your site users with CSS3 media queries.

Sample Page

To explore the media query functionality, use the following page outline:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<section>
<header>
<h1>Using CSS3 Media Queries</h1>
<p>An introduction to using CSS3 media queries to create responsive designs.</p>
</header>
<article>
<h2>Info 1</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</article>
<article>
<h2>Info 2</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</article>
<article>
<h2>Info 3</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</article>
<article>
<h2>Info 4</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</article>
<article>
<h2>Info 5</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</article>
</section>
</body>
</html>

The sample page includes some basic HTML5 content with dummy text in it. We will add to the head section and to the style section.

Viewport

Before we get started on media queries themselves, let's just touch on viewports. To allow users' mobile browsers to zoom in on your designs to fit them to the device width, add the following meta tag to the head section of your page:

<meta name="viewport" content="width=device-width" />

This in itself makes your page instantly more responsive, as the width will automatically adjust to the width of the user's device.

Default Styling

There are various distinct approaches to creating responsive designs in terms of what you assume about the user's device. For example, you can choose to make the default design aimed at larger screens, including desktop, laptop and potentially tablet screens, with one or more separate stylesheets or sections for smaller screens. Alternatively, you can take a "mobile-first" approach, with catering to larger screens considered secondary. In this tutorial we will take a desktop-first approach, but you can of course choose a different option bearing the purpose of your site in mind - we will be focusing on explaining how the media query syntax works rather than on recommended configurations.

Given that we are taking a desktop-first approach for this tutorial, let's include some styling code within the style section in the page head for this purpose:

body {
font-family:Arial, sans-serif;}
section {
max-width:1000px; 
margin:auto;}
header {
background-image:url('head_full.jpg'); 
background-repeat:no-repeat; 
height:260px; 
padding:20px; 
margin:auto; 
color:#ffffff; 
font-weight:bold;}
article {
width:45%; 
padding:2%; 
float:left;}

Take a moment to look over this code. The section holding the entire page content has a maximum width property. This has been chosen to match the width of the header background image, as has the header height. You can use this sample image if you wish:

We will be using this alternative image for the mobile design:

Notice that in the above CSS code, we set the article elements with width and float properties that will create a two-column layout as follows:

Open your page in any browser to see the default desktop design.

Mobile Style

Let's create a separate stylesheet for mobile, or more generally for smaller screens. Save it "mobile.css" and enter the following CSS code, which has slight but key differences from the default styling:

body {
font-family:Arial, sans-serif; 
margin:auto;}
section {max-width:500px;}
header {
background-image:url('head_mobile.jpg'); 
background-repeat:no-repeat; 
height:150px; 
padding:10px; 
margin:auto; 
color:#ffffff; 
font-weight:bold; }
article {
width:95%; 
padding:2%;}

The differences to note include the maximum width, which has again been set to match the header image width. The alternative mobile header image has also been set as background here, with the header height adjusted to suit. The article width has been set wider and the float property removed so that we have a one column layout instead of two columns as in the default.

Media Query Syntax

Now for the media queries. You can think of media queries as conditional statements if you have some basic knowledge of programming or scripting. A media query specifies CSS code or a linked stylesheet for the browser to apply if certain conditions are met. For example, the following CSS declaration applies the mobile stylesheet declarations for screens with a particular maximum width:

@media only screen and (max-device-width: 480px) {
body {
font-family:Arial, sans-serif;}
section {
max-width:1000px; 
margin:auto;}
header {
background-image:url('head_full.jpg'); 
background-repeat:no-repeat; 
height:260px; 
padding:20px; 
margin:auto; 
color:#ffffff; 
font-weight:bold;}
article {
width:45%; 
padding:2%; 
float:left;}
}

This could be placed in the style section of your page, after the default stylesheet declarations. However, let's use our separate stylesheet, by adding media queries to a link element instead, in the page head section, after the existing style section so that the default declarations are overridden:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="mobile.css" />

Here we specify that the mobile stylesheet should be used for screen devices with a 480px maximum width. Using the only keyword stops older browsers from applying the alternative stylesheet. The and keyword chains the screen and max-device-width conditions together, so that both must be met in order for the test as a whole to be met. Let's also make the smaller styling apply in cases where the device screen is any size, but the browser window is small, for example after being resized:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px), only screen and (max-width:480px)" href="mobile.css" />

In this case the comma between the two media query sections acts as an "OR" logical operator, so that the stylesheet will be applied if either of the two sets of conditions are met. This approach makes sense given that we are effectively targeting user browsers with particular properties, i.e. width, rather than particular types of device, i.e. desktop vs mobile.

You can target various properties with your media queries. For example, let's say that on some mobile devices a landscape viewing of the page will be wider than the 480px condition, meaning that the user is served the desktop styling in spite of being on a mobile. To avoid this, we can also test for orientation by extending the query further:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px), only screen and (max-width: 480px), only screen and (max-width:720px) and (orientation:landscape), only screen and (max-device-width:720px) and (orientation:landscape)" href="mobile.css" />

This applies the width test with a larger size, and includes an additional condition using the and keyword testing whether the device is turned to landscape rather than portrait. The mobile styling will now be applied if the device or browser width is less than 480px, or if the widths are less than 720px and the device is presenting a landscape view. Here is the page with the mobile styling applied:

Play around with media queries in your own sites to see how easy they are to apply!

Sue Smith is a developer and technical writer specialising in Web and software topics including Android. Sue has produced educational material for a variety of online publications including Smashing Magazine and the Envato network.