Architecture & DesignA Guide to Learning Media Queries in CSS3

A Guide to Learning Media Queries in CSS3

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Introduction

With the increasing popularity of mobile devices, web developers are required to ensure that their website renders well on different devices. One important aspect in such a rendering is applying different CSS rules to different requesting devices. To that end CSS3 media queries allow you to apply CSS rules depending on the media type and its capabilities. This article examines what CSS3 media queries are and how to use them in your web pages.

Overview of CSS3 Media Queries

To understand what CSS3 media queries are, let’s assume that you wish to create a web page that will be accessed by desktop computers as well as mobile devices. The desktop computer accessing your web page is going to be a feature rich device in terms of screen real estate, screen resolution and color support. On such a device you can easily afford to display a three column layout where the middle column is occupied by the core content of the web page and the remaining two columns display some auxiliary content or advertisements. If the same web page is being accessed over a smartphone you can’t afford this kind of layout because screen width and height of the device is limited. In such cases you may want to display one column consisting of the core content. In addition to the layout you may also want to adjust other aspects such as font sizes and colors. This calls for applying different CSS rules based on the different requesting devices. This is what CSS3 media queries allow you to do. Using CSS3 media queries you can specify a media type and a list of features so that if a requesting devices meets the specified criteria CSS rules that follow are applied to the web page being displayed. Not just CSS rules, you can also switch the entire style sheets depending on the requesting device.

Consider the following figure that shows how the same web page looks on a desktop computer and an iPhone (emulated via Safari desktop browser).

Webpage and iPhone Comparison
Webpage and iPhone Comparison

Both of these displays consists of the same <div> element. The first one is the desktop display whereas the second one is a mobile version. This change is accomplished by a CSS3 media query.

A media query can make use of media type and media features. A media type indicates the kind of device being targeted. Some of the media types include:

  • all (all media types)
  • screen (computer screens)
  • handheld (handheld devices) and
  • tv (television type devices)

Media features include parameters such as:

  • Minimum and maximum browser dimensions (width and height)
  • Width and height of the device screen
  • Orientation of the screen (landscape or portrait)

Now that you have some basic idea about media queries, let’s learn to write media queries.

Writing Media Queries

As mentioned earlier you can apply CSS queries in two ways. You can either specify that a style sheet be applied when a media query evaluates to true, or you can apply a CSS rule when a media query evaluates to true. In the former case you will write the media query in the <link> tag whereas in the later case you will write the media query inside a style sheet file.

Let’s first see how to write media queries inside a style sheet file. In this technique you need to use @media CSS rule. To try out how @media works, create a new HTML page add the following markup to it:

<!DOCTYPE html>
<html >
<head>
    <title></title>
    <link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
    <div class="mycontent">
        Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! 
        Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! 
        Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! 
        Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! 
    </div>
</body>
</html>

The above page consists of a <div> element that has mycontent CSS class attached with it. The <div> contains some test content. The mycontent CSS class is defined in StyleSheet1.css. So, create a new style sheet and name it StyleSheet1.css. Then add the following CSS rules to the style sheet:

@media (min-width: 1000px) {
  .mycontent
  {
    width:500px;
    background-color:#ffd800;
    color:#ff0000;
    border:2px solid red;
    padding:5px;
  }
}

@media (max-width: 600px) {
  .mycontent {
    width:200px;
    background-color:#00ff90;
    color:navy;
    border:2px solid darkblue;
    padding:2px;
  }
}

The above CSS defines two media queries. The first media query checks whether min-width property is at least 600 pixels. The min-width property indicates the minimum viewing area on the requesting device. In the above example if this minimum viewing area is greater than 1000px, the mycontent CSS class with the specified rules is applied to the <div> element. The second media query uses max-width property. The max-width property indicates that if viewing area is smaller than 600px, the CSS rules that follow are to be applied.

To test the above media queries on a desktop computer, run the web page in a browser (Chrome for example) and maximize the browser window so that the viewing area is larger than 1000px. The following figure shows how the web page looks under these conditions:

 Viewing Area Larger than 1000px
Viewing Area Larger than 1000px

Now, resize the browser window smaller than 600px and your display should change to this:

Viewing Area Smaller than 600px
Viewing Area Smaller than 600px

Of course, currently we have not taken into account viewing areas between 600px – 1000px but you can easily provide a default mycontent class for these cases.

In the above media queries no media type was explicitly specified in which case “all” is assumed. You could have written the same media queries using a media type of screen as follows:

@media screen and (min-width: 1000px) {
  .mycontent
  {
    width:500px;
    background-color:#ffd800;
    color:#ff0000;
    border:2px solid red;
    padding:5px;
  }
}

@media screen and (max-width: 600px) {
  .mycontent {
    width:200px;
    background-color:#00ff90;
    color:navy;
    border:2px solid darkblue;
    padding:2px;
  }
}

As you can see, now a media type of screen and media features min-width and max-width are used in the queries.

You can also specify multiple conditions in a media query. For example, you can write the following media query to take care of viewing areas between 600px – 1000px.

@media (min-width: 600px) and (max-width:1000px) {
  .mycontent {
    width:350px;
    background-color:#ff00dc;
    color:navy;
    border:2px solid #4800ff;
    padding:2px;
  }
}

As you can see the above media query combines min-width and max-width parameters. If you resize the browser window so that the viewing area is between the range mentioned above you will get a display like this:

Viewing Area Between 600px and 1000px
Viewing Area Between 600px and 1000px

In the above example you used the width of the viewing area. If you wish to use the dimensions of the screen for checking purposes, you can use max-device-width and max-device-height parameters. For more details of available options that you can use in media queries click here.

Switching Style Sheets Using Media Queries

In the preceding examples you use a single style sheet to house different media queries. At times you may want to apply altogether different style sheets for different media features. For example, you may have a style sheet designed for large screen dimensions. The fonts, font sizes, colors and overall layout in this style sheet is specific to desktop computers. On the other hand you may have altogether different sets of fonts, font sizes and layout elements that define the look and feel of the web page on mobile devices. In such cases it is neater and more manageable to keep the respective styles in different style sheet files.

To tell the browser which style sheet to apply, you specify a media query in the <link> elements of the web page. Consider the following markup:

 <link href="StyleSheet2.css" rel="stylesheet" media="screen and (min-width: 1000px)" />
<link href="StyleSheet3.css" rel="stylesheet" media="screen and (max-width: 600px)" />

The above markup tells the browser that StyleSheet2.css is to be applied if the media query as specified in the media attribute evaluates to true. In this case the media query checks whether the requesting device has a viewable area greater than 1000px. On the same lines the second line of markup specifies that StyleSheet3.css be applied if the viewable area is smaller than 600px.

As you can see from the above example the media queries mentioned in the media attribute are the same that you used earlier with @media. To test the media attribute, place the two variations of the mycontent CSS class in two style sheets (StyleSheet2.css and StyleSheet3.css) and then add the above markup in the main web page. If you run the web page in the browser you should get the same results as before depending on the browser dimensions.

Summary

CSS3 media queries allow you to apply CSS rules based on the media type and media features. This makes it easy to apply different CSS rules based on the requesting device. The media features such as device dimensions, viewable area and orientation can be tested using media queries. Overall, media queries are a welcome addition to CSS and web developers looking to develop websites for mobile devices will find this feature appealing.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories