Media queries

Media queries

Media queries consist of a media type and one or more expressions, involving media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true.

media_query_list:  [,  ]*
media_query: [[only | not]?  [ and  ]*]
  |  [ and  ]*
expression: (  [: ]? )
media_type: all | aural | braille | handheld | print |
  projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid

CSS Media Queries: Bees Knees Or Spawn of Satan?

<link rel="stylesheet" type="text/css"
          media="screen and (max-device-width: 480px)"
          href="shetland.css" />

Responsive Web Design