CSS3: media queries

CSS3: media queries
 
CSS3: media queries
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


CSS3 introduces an extension on the media types you might already use in HTML4 and CSS2. 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 width to 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 mentioning 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 cover 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) { ... }

The following example demonstrates all media query examples above in action, when a media query is applied you will see its title as highlighted, just try to resize browser widow or change orientation of your device if you use tablet or mobile phone for viewing this article.

Live demo

Source: webdesign.about.com


 

Read also

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation