Category: HTML

Media queries are part of the CSS 3 recommendations that worked beginning with HTML 4 and CSS 2. Lately they have been touted as a solution to designing for mobile devices. The trend has earned the label “responsive web design.” I thought it was time to look at the basics of media queries.

When you use media queries, you can set up style rules that are based on the media environment of the output device. You might have one set of styles for devices using landscape display, and another for devices using portrait display. Or you might write rules specific to the color bit depth of the output device.

The W3C explains,

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

“A media type and zero or more expressions that check for the conditions of particular media features.” What does that look like in practice?

Start with an @media declaration that sets up the device and the conditions you want to meet. One way to do this is to create a specific stylesheet for various conditions and link to it. For example:

<link rel="stylesheet" media="screen and (color)" 
   href="example.css" />

This uses the familiar stylesheet link to set up a media type – screen – and a condition – the screen displays in color – and links to a stylesheet specific to those conditions. The same thing can be accomplished with the @import method of linking to a stylesheet.

@import url(color.css) screen and (color);

A more manageable solution is to link to a single stylesheet, and put @media rules in that one stylesheet. For example,

@media screen and (max-device-width: 480px) {
  .sidebar {
    float: none;
  }
  body {
    background-color: #fff;
  }
}

With @media rules in a stylesheet, the example style rule specifies a media type – screen – and sets up the conditions with terms and values in parenthesis – (max-device-width: 480px). Then, nestled in curly braces {}, one or more selectors and rule declaration blocks are used to create the desired style. The rules inside the enclosing curly braces will be applied only when the conditions are met. Otherwise, they are ignored.

Beyond the basics, you can get more specific and/or complex. You can use commas to set up a number of media types and conditions. There are operators such as and, not, and only that can set up more precise sets of parameters for applying styles.

The media types

• all
• handheld
• projection
• screen
• tv
• tty
• braille
• print

The media features

• width
• height
• device-width
• device-height
• orientation (portrait or landscape)
• aspect-ratio (the ratio of the value of the device-width media feature to the value of the device-height media feature)
• device-aspect-ratio
• color (bit depth of the device)
• color-index
• monochrome
• resolution
• scan (for tv)
• grid (for tty or some phones)

Values

Values can be expressed in pixels, ems, dpi (dots per inch) and dpcm (dots per centimeter)

Further reading

• Respond to Different Devices With CSS3 Media Queries
• Responsive Web Design
• W3C Media Queries Candidate Recommendation