1. Computing

Discuss in my forum

CSS3 Media Queries

Learn How to Target Your Stylesheets to Exactly the Devices You Want

By

CSS3 introduces an extension on the media types you might already use in HTML4 and CSS2 documents. These media types allow you to define style sheets specifically for screen and print media types, as well as others. But with CSS3 media queries, you can be more precise about where exactly you want to apply the styles it defines.

How to Write a Media Query

A media query consists of a media type and an optional expression to check for specific media features. Some of the features you can check for include: width, height, and color. For example, you can define a media type of screen and then set the media query to display different styles to a user agent that has a max-width of 320px so that smaller screens would get a different look and feel from larger ones.

You add the media queries right into the link or @-code you use to call your style sheet. And you write them in the same syntax as you would CSS. In other words: query: value.

For example, you might want to send mobile devices with a width between 400 and 800 pixels a special tablet style sheet. To define this you would write:

<link rel="stylesheet" media"screen and (min-width: 400px) and (max-width: 800px)" href="tablet.css">

You can also define media queries with @media styles, such as:

@media screen and (min-width: 400px) and (max-width: 800px) { … }

What Features Can You Check for with Media Queries?

There are 13 features you can evaluate in your media queries:

  • width
    Check the width of the display area including any scroll bar. You can use min- and max- prefixes.
  • height
    Check the height of the display area including any scroll bar. You can use min- and max- prefixes.
  • device-width
    Check the width of the rendering surface. You can use min- and max- prefixes.
  • device-height
    Check the height of the rendering surface. You can use min- and max- prefixes.
  • orientation
    Check if the orientation is portrait or landscape.
  • aspect-ratio
    Check the ratio of the width to the height. You can use min- and max- prefixes.
  • device-aspect-ratio
    Check the ratio of the device width to the device height. You can use min- and max- prefixes.
  • color
    Check the number of color bits per color component. By just saying color you are applying the styles to all color devices. You can use min- and max- prefixes.
  • color-index
    Check the number of color entries in the color lookup table of the device. You can use min- and max- prefixes.
  • monochrome
    Check the number of bits per pixel in a monochrome frame buffer. You can use just monochrome to match all monochrome devices. You can use min- and max- prefixes.
  • resolution
    Check the pixel density of the output device. You can use min- and max- prefixes.
  • scan
    Check if the device is progressive or interlace scanning. This is usually for tv devices.
  • grid
    Check if the device is grid or bitmap. Grid devices include “tty” terminals and phones with only one fixed font.

Media Query Expressions

A media query is a logical expression with either a true or false value. You can use boolean operators like and, or, and not. There is also a keyword only that you can use to hide style sheets from older user agents.

Media Query Examples

Here are a few sample media queries you can use to define specific devices. Keep in mind that for every example here there are probably 10 other ways you could define a media query to get similar results.

To style for many smartphones with smaller screens, you could write:

@media screen and (max-width:480px) { … }

To block older browsers from seeing an iPhone or Android phone style sheet, you could write:

@media only screen and (max-width: 480px;) { … }

To capture most tablets, you could write:

@media screen and (min-width:400px) and (max-width:800px) { … }

To target the iPad, you could write:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { … }

To target the Xoom tablet, you could write:

@media only screen and (min-device-width: 1280px) and (max-device-width: 800px) { … }

To style for a device in portrait mode, you could write:

@media screen and (orientation: portrait) { … }

To print a document only on 300dpi or better printers, you could write:

@media print and (min-resolution: 300dpi) { … }

To target any device with a 16:9 aspect ratio, you could write:

@media only screen and (device-aspect-ratio: 16/9) { … }

©2014 About.com. All rights reserved.