and

The and keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied all media type, could look like this:

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

If, however, you wanted this to apply only if the display is in landscape, you could use an and operator to chain the media features together.

@media (min-width: 700px) and (orientation: landscape) { ... }

Now the above media query will only return true if the viewport is 700px wide or wider and the display is in landscape. If, however, you only wanted this to apply if the display in question was of the media type TV, you could chain these features with a media type using an and operator.

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

Now, the above media query will only apply if the media type is TV, the viewport is 700px wide or wider, and the display is in landscape.

comma-separated lists

Comma-separated lists behave like the logical operator or when used in media queries. 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.

For instance, if you wanted to apply a set of styles if the viewing device either had a minimum width of 700px or was a handheld in landscape, you could write the following:

Above, if I were on a screen device with a viewport width of 800px, the media statement would return true because the first part, interpreted as @media all and (min-width: 700px) would apply to my device and therefore return true, despite the fact that my screen device would fail the handheld media type check in the second media query. Likewise, if I were on a handheld device held in landscape with a viewport width of 500px, while the first media query would fail due to the viewport width, the second media query would succeed and thus the media statement would return true.

not

The not keyword applies to the whole media query and returns true if the media query would otherwise return false (such as monochrome on a color display or a screen width of 600px with a min-width: 700px feature query). A not will only negate the media query it is applied to and not to every media query if present in a comma-separated list of media queries. The not keyword cannot be used to negate an individual feature query, only an entire media query. For example, the not is evaluated last in the following query:

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

This means that the query is evaluated like this:

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

... rather than like this:

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

As another example, look at the following media query:

@media not screen and (color), print and (color)

It is evaluated like this:

@media (not (screen and (color))), print and (color)

only

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

Note: Parentheses are required around expressions; failing to use them is an error.

Media features

Most media features can be prefixed with "min-" or "max-" to express "greater or equal to" or "less than or equal to" constraints. This avoids using the "<" and ">" symbols, which would conflict with HTML and XML. If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.

Note: If a media feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false. For example, querying the aspect ratio of an aural device always results in false.

color

Indicates the number of bits per color component of the output device. If the device is not a color device, this value is zero.

Note: If the color components have different numbers of bits per color component, the smallest number is used. For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component. If the device uses indexed colors, the minimum number of bits per color component in the color table is used.

Examples

To apply a style sheet to all color devices:

@media all and (color) { ... }

To apply a style sheet to devices with at least 4 bits per color component:

aspect-ratio

Describes the aspect ratio of the targeted display area of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).

Example

The following selects a special style sheet to use for when the display area is at least as wide as it is high.

@media screen and (min-aspect-ratio: 1/1) { ... }

This selects the style when the aspect ratio is either 1:1 or greater. In other words, these styles will only be applied when the viewing area is square or landscape.

device-aspect-ratio

Describes the aspect ratio of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).

Example

The following selects a special style sheet to use for widescreen displays.

Example

grid

Value:<mq-boolean> which is an <integer> that can only have the 0 and 1 value.Media: allAccepts min/max prefixes: no

Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1. Otherwise it is zero.

Example

To apply a style to handheld devices with a 15-character or narrower display:

@media handheld and (grid) and (max-width: 15em) { ... }

Note: The "em" unit has a special meaning for grid devices; since the exact width of an "em" can't be determined, 1em is assumed to be the width of one grid cell horizontally, and the height of one cell vertically.

orientation

Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.

Example

To apply a style sheet only in portrait orientation:

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

Note: This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.

See this CSSWG article for compatibility good practices regarding resolution and dppx.

Note: This media feature is also implemented by Webkit and by IE 11 for Windows Phone 8.1 as -webkit-device-pixel-ratio. The min and max prefixes as implemented by Gecko are named min--moz-device-pixel-ratio and max--moz-device-pixel-ratio; but the same prefixes as implemented by Webkit are named -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio.