CSS media queries

media query는 media type과 적어도 하나 이상의 expression으로 구성되는데 width, height, 그리고 color와 같은 media feature들을 이용한 expression을 통해 style sheet들의 적용 범위를 한정할 수 있다. Media query는 CSS3에 포함되어 있으며, 콘텐트의 변경 없이도 특정한 범위에 속하는 출력기기들에 맞춤형으로 콘텐트의 프리젠테이션을 바꿀수 있게 해준다.

문법 (Syntax)

미디어 쿼리는 media type 으로 이루어져 있다. 그리고 CSS3 스펙에 맞게 한 개 이상의 익스프레션을 포함한다. 이 것은 true/false 값으로 표현될 수 있는 미디어 피쳐이다. 미디어 쿼리에 있는 미디어 타입이 디바이스 타입과 일치하고, 미디어 쿼리에 있는 모든 익스프레션이 참일 때, 쿼리의 결과는 참이 된다.

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

만약 미디어 쿼리 값이 참이면, 중괄호로 묶여 있는 내부의 해당 스타일시트나 스타일 룰이 적용된다. <link> 태그에 미디어 쿼리가 붙어있는 경우, 그 값의 참/거짓 여부와 상관없이 해당 스타일시트는 항상 다운로드 된다. 하지만 값이 거짓일 경우 적용되지는 않는다.

not 이나 only 키워드를 명시적으로 붙이지 않는 이상, 미디어 타입은 선택적(optional)이며 all 타입으로 간주된다.

논리 연산자 (Logical operators)

not, and, only 등의 연산자를 사용하여 복잡한 미디어 쿼리를 구성할 수 있습니다. and 연산자는 다중 media features를 묶어서 하나의 미디어 쿼리로 만들게 합니다. 각각의 결과가 참인 경우에만 미디어 쿼리가 실행될 것입니다. not 연산자는 미디어 쿼리 전체의 값을 반전시키는데 사용합니다. only 연산자는 쿼리 전체가 참일경우 실행되며, 특히 구버전의 브라우저가 해당 스타일을 적용하지 않게하는데 유용합니다. not 이나 only 연산자를 사용할 경우 반드시 적확한 미디어 타입을 기재해야 합니다.

또한 콤마를 사용하여 여러개의 미디어 쿼리를 연속으로 나열할 수 있습니다. 이 경우 or 연산자와 동치이며 나열된 미디어 쿼리의 값중 하나라도 참일 경우, 전체 구문은 참이 됩니다.

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:

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

Above, if I were on a screen device with a viewport width of 800px, the media statement would return true because the first part, interperated 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:

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

Pseudo-BNF (for those of you that like that kind of thing)

media_query_list: <media_query> [, <media_query> ]*
media_query: [[only | not]? <media_type> [ and <expression> ]*]
  | <expression> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
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

Media queries are case insensitive.  Media queries involving unknown media types are always false.

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.

color

Value: <color>
Media: media/visual
Accepts min/max prefixes: yes

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

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:

@media all and (min-color: 4) { ... }

color-index

Value: <integer>
Media: media/visual
Accepts min/max prefixes: yes

Indicates the number of entries in the color look-up table for the output device.

Examples

To indicate that a style sheet should apply to all devices using indexed color, you can do:

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

To apply a style sheet to indexed color devices with at least 256 colors:

<link rel="stylesheet" media="all and (min-color-index: 256)" href="https://foo.bar.com/stylesheet.css" />

aspect-ratio

Value: <ratio>
Media: media/visual, media/tactile
Accepts min/max prefixes: yes

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

Value: <ratio>
Media: media/visual, media/tactile
Accepts min/max prefixes: yes

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.

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

This selects the style when the aspect ratio is either 16:9 or 16:10.

device-height

Value: <length>
Media: media/visual, media/tactile
Accepts min/max prefixes: yes

Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

Example

To apply a style sheet to a document when displayed on a screen that is less than 800 pixels long, you can use this:

<link rel="stylesheet" media="screen and (max-device-height: 799px)" />

device-width

Value: <length>
Media: media/visual, media/tactile
Accepts min/max prefixes: yes

Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

Example

To apply a style sheet to a document when displayed on a screen that is less than 800 pixels wide, you can use this:

<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

grid

Value: <integer>
Media: all
Accepts 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) { ... }

height

Value: <length>
Media: media/visual, media/tactile
Accepts min/max prefixes: yes

The height media feature describes the height of the output device's rendering surface (such as the height of the viewport or of the page box on a printer).

monochrome

Value: <integer>
Media: media/visual
Accepts min/max prefixes: yes

Indicates the number of bits per pixel on a monochrome (greyscale) device.  If the device isn't monochrome, the device's value is 0.

Examples

To apply a style sheet to all monochrome devices:

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

To apply a style sheet to monochrome devices with at least 8 bits per pixel:

@media all and (min-monochrome: 8) { ... }

orientation

Value: landscape | portrait
Media: media/visual
Accepts min/max prefixes: no

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) { ... }

resolution

Value: <resolution>
Media: bitmap
Accepts min/max prefixes: yes

Indicates the resolution (pixel density) of the output device.  The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).

Example

To apply a style sheet to devices with at least 300 dots per inch of resolution:

@media print and (min-resolution: 300dpi) { ... }

To replace the old (min-device-pixel-ratio: 2) syntax:

@media screen and (min-resolution: 2dppx) { ... }

scan

Value: progressive | interlace
Media: media/tv
Accepts min/max prefixes: no

Describes the scanning process of television output devices.

Example

To apply a style sheet only to progressive scanning televisions:

@media tv and (scan: progressive) { ... }

width

Value: <length>
Media: media/visual, media/tactile
Accepts min/max prefixes: yes

The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).

Examples

If you want to specify a style sheet for handheld devices, or screen devices with a width greater than 20em, you can use this query:

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

This media query specifies a style sheet that applies to printed media wider than 8.5 inches:

<link rel="stylesheet" media="print and (min-width: 8.5in)"
    href="https://foo.com/mystyle.css" />

This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:

@media screen and (min-width: 500px) and (max-width: 800px) { ... }

Mozilla-specific media features

Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the :-moz-system-metric(images-in-menus) CSS pseudo-class.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0.

This corresponds to the :-moz-system-metric(mac-graphite-theme) CSS pseudo-class.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.

This corresponds to the :-moz-system-metric(maemo-classic) CSS pseudo-class.

Value: <number>
Media: media/visual
Accepts min/max prefixes: yes

Gives the number of device pixels per CSS pixel.

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
       (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
       (min-resolution: 2dppx),             /* The standard way */
       (min-resolution: 192dpi)             /* dppx fallback */ 

Value: windows-xp | windows-vista | windows-win7 | windows-win8
Media: media/visual
Accepts min/max prefixes: no

Indicates which operating system version is currently being used. Currently only implemented on Windows. Possible values are:

• windows-xp
• windows-vista
• windows-win7
• windows-win8

This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the :-moz-system-metric(scrollbar-end-backward) CSS pseudo-class.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the :-moz-system-metric(scrollbar-end-forward) CSS pseudo-class.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the :-moz-system-metric(scrollbar-start-backward) CSS pseudo-class.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the :-moz-system-metric(scrollbar-start-forward) CSS pseudo-class.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

This corresponds to the :-moz-system-metric(scrollbar-thumb-proportional) CSS pseudo-class.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

This corresponds to the :-moz-system-metric(touch-enabled) CSS pseudo-class.

Example

You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

This corresponds to the :-moz-system-metric(windows-classic) CSS pseudo-class.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

This corresponds to the :-moz-system-metric(windows-compositor) CSS pseudo-class.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

This corresponds to the :-moz-system-metric(windows-default-theme) CSS pseudo-class.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.

Value: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
Media: media/visual
Accepts min/max prefixes: no

Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

• aero
• luna-blue
• luna-olive
• luna-silver
• royale
• generic
• zune

This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.

Browser compatibility

See also

• CSS 3 media query specification
• Media types
• Using media queries from code
• List of mobile and tablet viewport sizes with pixel ratios and physical sizes
• CSS Animations Between Media Queries by David Walsh