Active Media Queries

You can test these yourself in your browser's developer tools. Try using 'window.matchMedia("(min-width: 10px)").matches' in the console.

Event listeners are added to the MediaQueryList objects to automatically update the display when the media query changes.

Lengths are expressed in different units. It is possible to determine if the viewport is zoomed by comparing em units to px units. The px unit should be 16 times larger than the em unit when the viewport is zoomed to 100%.

@media print /* unsupported */

@media screen /* unsupported */

The output device type. MDN

print: Intended for paged material and for documents viewed on screen in print preview mode.
screen: Intended primarily for color computer screens.

@media (any-hover) /* unsupported */

Can the user hover over elements? This can match multiple queries. MDN

hover: Any input mechanism allows the user to hover over elements.
none: Any input mechanism does not allow the user to hover over elements.

@media (any-pointer) /* unsupported */

Is there a pointing device? How accurate is it? This can match multiple queries. MDN

coarse: Any input mechanism allows coarse positioning.
fine: Any input mechanism allows fine positioning.
none: There is no pointing device.

@media (aspect-ratio) JavaScript Required

The width-to-height aspect ratio of the viewport. This is converted to a decimal number, e.g. 16/9 becomes 1.77778. MDN

@media (color) JavaScript Required

Number of bits of color. MDN

0: The output device is not a color device.

@media (color-gamut) /* unsupported */

Color range supported for output. MDN

p3: The display supports approximately the DCI-P3 gamut or more. p3 includes sRGB.
rec2020: The display supports approximately the gamut specified by the ITU-R BT.2020 color space or more. rec2020 includes p3 and sRGB.
srgb: The display supports the sRGB gamut or more. This includes most displays.

@media (color-index) JavaScript Required

Number of indexed colors for display. MDN

0: The output device does not use an indexed color table.

@media (device-aspect-ratio) JavaScript Required

DEPRECATED - Width-to-height aspect ratio of output. MDN

@media (device-height) JavaScript Required

DEPRECATED - Output device height. MDN

@media (device-posture) /* unsupported */

If viewport is flat or folded. MDN

continuous: The device is flat or is unable to fold.
folded: The device is folded.

@media (device-width) JavaScript Required

DEPRECATED - Output device width. MDN

@media (display-mode) /* unsupported */

How the application is being displayed. MDN

browser: Opened in a conventional browser tab or new window.
fullscreen: Opened in a standalone window that takes over the entire screen and no user agent chrome is shown.
minimal-ui: Looks and feels like a standalone application with a minimal set of UI elements for controlling navigation.
picture-in-picture: Displayed in a floating and always-on-top window.
standalone: Looks and feels like a standalone application.
window-controls-overlay: Looks and feels like a standard desktop application.

@media (dynamic-range) /* unsupported */

The combination of brightness, contrast ratio, and color depth. MDN

high: The display and user agent support high peak brightness, high contrast ratio, and wide color gamut.
standard: Matches any visual device. A device that matches high will also match standard.

@media (forced-colors) /* unsupported */

Does the user agent restrict colors? MDN

active: Forced color mode is active.
none: The page's colors are not forced into a limited palette.

@media (grid) /* unsupported */

Does the device use a grid or a bitmap screen? MDN

0: The device uses a bitmap screen.
1: The device uses a grid screen.

@media (height) JavaScript Required

The output device height. MDN

@media (hover) /* unsupported */

Can the user hover over elements? MDN

hover: The primary input mechanism allows the user to hover over elements.
none: Hovering is not possible with the primary input mechanism.

@media (inverted-colors) /* unsupported */

Is the user agent or OS inverting colors? MDN

inverted: Colors are inverted.
none: Neither the OS nor the user agent are inverting colors.

@media (monochrome) JavaScript Required

Bits per pixel in the device's monochrome frame buffer. MDN

0: The device is not monochrome.

@media (orientation) /* unsupported */

Viewport orientation. MDN

landscape: The viewport is wider than it is tall.
portrait: The viewport is taller than it is wide.

@media (overflow-block) /* unsupported */

How does the device handle overflows along the block axis? MDN

none: Overflowing content is not displayed.
optional-paged: Content could be scrolled or page breaks can manually be triggered.
paged: Content is broken up into discrete pages.
scroll: Content is scrollable when it overflows.

@media (overflow-inline) /* unsupported */

Can content overflowing the inline axis be scrolled? MDN

none: Overflowing content is not displayed.
scroll: Content is scrollable when it overflows.

@media (pointer) /* unsupported */

Is the input a pointing device? How accurate is it? MDN

coarse: The primary pointing device allows coarse positioning.
fine: The primary pointing device allows fine positioning.
none: There is no pointing device.

@media (prefers-color-scheme) /* unsupported */

Does the user prefer a light or dark color scheme? MDN

dark: The user prefers a dark color scheme.
light: The user prefers a light color scheme.

@media (prefers-contrast) /* unsupported */

Did the user change the amount of contrast between adjacent colors? MDN

custom: The user has specified a specific set of colors. The colors do not fulfill more nor less.
less: Less contrast is desired.
no-preference: The user has no preference for contrast.
more: More contrast is desired.

@media (prefers-reduced-data) /* unsupported */

Has the user requested web content that consumes less bandwidth? MDN

no-preference: The user has no preference for reduced data usage.
reduce: The user prefers reduced data usage.

@media (prefers-reduced-motion) /* unsupported */

Does the user prefer less motion? MDN

no-preference: The user has no preference for reduced motion.
reduce: The user prefers reduced motion.

@media (prefers-reduced-transparency) /* unsupported */

Does the user want less transparency or translucent layer effects? MDN

no-preference: The user has no preference for reduced transparency.
reduce: The user prefers reduced transparency.

@media (resolution) JavaScript Required

Output pixel density. MDN

@media (scan) /* unsupported */

Is the display progressive or interlaced? MDN

interlace: The display is interlaced.
progressive: The display is progressive.

@media (scripting) /* unsupported */

Is JavaScript enabled? MDN

enabled: JavaScript is enabled.
initial-only: JavaScript is enabled, but the user has requested that it be disabled after the initial page load.
none: JavaScript is disabled.

@media (shape) /* unsupported */

Distinguish regular and round displays. MDN

rect: The display is rectangular.
round: The display is round.

@media (update) /* unsupported */

How frequently can the device modify the appearance of content. MDN

none: The device cannot modify the appearance of content, such as when it is printed on paper.
slow: The device can modify the appearance of content, but it is slow, such as with an epaper display or severely underpowered device.
fast: The device can modify the appearance of content quickly and animations could be used.

@media (video-dynamic-range) /* unsupported */

Combination of brightness, contrast ratio, and color depth supported by video. MDN

high: The video supports high peak brightness, high contrast ratio, and color depth greater than 24-bit (8-bits per color component of RGB).
standard: Matches any visual device. A device that matches high will also match standard.

@media (width) JavaScript Required

Width of the viewport, including scrollbar. MDN