<blog>
CSS3 Media Queries

As I mentioned in a previous article, a media query is a statement within a stylesheet that includes a media type and at least one expression by which the web browser can evaluate the relevancy of the statement and it's need. Media queries can be helpful in giving structure to a fluid grid/fluid design. This allows the developer to target device viewports and style content without changing the content itself.

Syntax

Media queries can include a media type and one or more expressions that evaluate media features which result in a boolean response. If the expressions evaluate to false then the media query contents are basically ignored. If the expressions evaluate to true then the custom stylesheet or style rules are applied.

Included within a style sheet:

@media screen and (min-width : 768px) {
    #carouselContainer {
        overflow: hidden;
    }
}

Subjectively including a style sheet:

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

Media Types

Quite simply - the type of media being targeted.

Logical Operators

Like traditional development languages, you can increase specificity of your queries by including logical operators. Allowed operators include and, not and only.

and

The and keyword is used to combine media features and/or media types. For instance, to target screens between 768px and 1024px wide.

/* All widths between 768px and 1024px */
@media screen and (min-width: 768px) and (max-width : 1024px) { ... }

not

The not keyword is used on the entire media query and returns true if the media query would otherwise return false. A not will only negate the media query it is applied to and not to every media query that may be present in a comma-separated list of media queries.

@media not all and (monochrome) { ... }

only

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles:

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Or perhaps target only iPhone4:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

or - comma-separated lists

In order to evaluate an expression using or you must instead create your media query as comma-separated lists. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. This means the comma-separated media queries can target different media features, types, and states.

/* All widths between 768px and 1024px */
@media screen and (max-width: 768px), handheld and (min-width : 480px) { ... }

Media Features

Dimension

width, height

The height and width reference the current browser window. However, using the base width and height do not allow for very complex evaluations. To allow for more complex evaluations you can combine with the prefixes "min-" and "max-".

/* All widths up to 768px */
@media screen and (max-width: 768px) { ... }

/* All widths between 768px and 1024px */
@media screen and (min-width: 768px) and (max-width : 1024px) { ... }

device-width, device-height

The device-height and device-width reference more than just the current browser window. They reference the entire screen or device viewport. Just like the standard width and height values, you can combine with the prefixes "min-" and "max-" in order to allow for more complex evaluations.

/* All device widths up to 480px */
@media all and (max-device-width: 480px) { ... }

resolution

Indicates the resolution of the output device, or pixel density. The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm). Like the other dimensional values, you can pinpoint requirements by combining with "min-" and "max-" prefixes.

/* Stylesheet for devices that print at a minimum 300dpi */
@media print and (min-resolution: 300dpi) { ... }

Orientation, Aspect Ratio

orientation

Orientation accepts a value of landscape (wider than tall) or portrait (taller than wide).

/* All devices and landscape orientation */
@media all and (orientation: landscape) { ... }

/* Handheld devices and portrait orientation with min-width */
@media handheld and (orientation: portrait) and (min-width: 480px) { ... }

aspect-ratio, device-aspect-ratio

Describes the aspect ratio of the targeted area or output device. Can be combined with "min-" and "max-" prefixes.

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

Color

color, monochrome

You can query whether or not the screen is in color, or is monochrome.

@media (color) { ... }

color-index

Color-index allows you to specify a color depth that must be supported.

@media (min-color-index: 256) { ... }