ranton.org - CSS Media Queries

Oct 16, 2012

CSS has a useful feature called media queries which can be used to make your pages adapt to the browser and device they are rendered on. The basic ability to use different CSS for different types of media such as screen or print has been around since CSS2, but now media queries have become more powerful in modern browsers and are an official W3C standard.

Adapting to screen size

One use of CSS media queries is including specific CSS style information only when the screen dimensions fit certain criteria.

For example, you can display elements only if the screen width is above a certain size like this snippet which shows the element with id logo only when the screen width is at least 900 pixels.

#logo {
    display: none;
}
@media (min-width: 900px) {
   #logo {
       display: block;
   }
}

Different stylesheets

You can also use CSS media queries to control which stylesheet you load by setting the media attribute of the link tag you use to load your stylesheet. Using a different stylesheet for printing and display on screen is another possibility.

For example this uses one stylesheet for screens above 800 pixels, one for smaller screens, and a third for print devices.

<link rel='stylesheet' media='screen and (min-width: 800px)' href='large.css' />
<link rel='stylesheet' media='screen and (max-width: 799px)' href='small.css' />
<link rel='stylesheet' media='printn' href='print.css' />

You can see that CSS media queries are a useful tool for creating responsive designs that utilize screen space when it is available but still adapt appropriately when space is scarce.

More information

For more information on CSS media queries, check out some of these pages: