Responsive Web Design – CSS Media Queries

.

HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets.

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.

W3C Media Queries

How to use Media Queries

Types

HTML4 had these media types, which are all still valid:

  • aural
  • braille
  • handheld
  • print
  • projection
  • screen
  • tv
@media screen, projection { ... }

Dimensions

You get height and width, which query against the current browser window height and width. You could use them as-is, but that would probably be rare.
Both of them accept min/max prefixes, so more commonly you’d used them as:

  • min-width
  • max-width
  • min-height
  • max-height

There is also device-width and device-height, which also provide min-device-width, max-device-width, min-device-height, and max-device-height.

@media (min-device-width: 640px) { ... }

Orientation / Aspect Ratio

You can query against the aspect ratio of the screen as well with device-aspect-ratio.

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

Or if the screen is in portrait (height larger than width) or landscape (width larger than height) mode.

@media (orientation:portrait) { ... }

Color

You can query on if the screen is in color or not and details about that.

@media (color) { /* Screen is in color */ }

@media (min-color-index: 256) { /* Screen has at least 256 colors */ }

@media (monochrome) { /* Screen is monochrome */ }

Read full article by Chris Coyier.

Some useful resources:

Random posts