MediaQueryList API
The MediaQueryList Object
The MediaQueryList object stores information from a media query.
The MediaQueryList object is a property of the window object.
The MediaQueryList object is accessed with:
window.matchMedia() or just matchMedia():
Examples
const mqlObj = window.matchMedia();
Try it Yourself »
const mqlObj = matchMedia();
Try it Yourself »
See Also:
MediaQueryList Properties
| Property | Description |
|---|---|
| matches | A boolean.true if the document matches the query,
otherwise false. |
| media | A string. A media query (list). |
MediaQueryList Methods
| Method | Description |
|---|---|
| addListener() | Adds a new listener function, which is executed whenever the media query's evaluated result changes |
| removeListener() | Removes a previously added listener function from the media query list. Does nothing if the specified listener is not already in the list |
Media Queries
The media queries of the matchMedia() method can be any of the media features of the
CSS @media rule, like min-height, min-width, orientation, etc.
Examples
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
Media Types
A media-type describes the general category of a device.
| Value | Description |
|---|---|
| all | Default. Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
Media Features
Media features are used to apply styles based on the device's capabilities, such as screen size, orientation, and resolution.
Media features are optional, and each media feature expression must be surrounded by parentheses.
| Value | Description |
|---|---|
| any-hover | Does any available input mechanism allow the user to hover over elements? |
| any-pointer | Is any available input mechanism a pointing device, and if so, how accurate is it? |
| aspect-ratio | The ratio between the width and the height of the viewport |
| color | The number of bits per color component for the output device |
| color-gamut | The approximate range of colors that are supported by the user agent and output device |
| color-index | The number of colors the device can display |
| device-posture | Detects the device's current posture, that is, whether the viewport is in a flat or folded state |
| display-mode | The mode in which an application is being displayed: for example, fullscreen or picture-in-picture mode |
| dynamic-range | Combination of brightness, contrast ratio, and color depth that are supported by the user agent and the output device |
| forced-colors | Detect whether user agent restricts color palette |
| grid | Whether the device is a grid or bitmap |
| height | The viewport height |
| hover | Does the primary input mechanism allow the user to hover over elements? |
| inverted-colors | Is the browser or underlying OS inverting colors? |
| monochrome | The number of bits per "color" on a monochrome (greyscale) device |
| orientation | The orientation of the viewport (landscape or portrait mode) |
| overflow-block | How does the output device handle content that overflows the viewport along the block axis |
| overflow-inline | Can content that overflows the viewport along the inline axis be scrolled |
| pointer | Is the primary input mechanism a pointing device, and if so, how accurate is it? |
| prefers-color-scheme | Does the user prefer a light color scheme or a dark color scheme? |
| prefers-contrast | Does the user prefer a high contrast display? |
| prefers-reduced-data | Does the user prefer reduced data usage? |
| prefers-reduced-motion | Does the user prefer reduced motion? |
| prefers-reduced-transparency | Does the user prefer reduced transparency? |
| resolution | The resolution of the output device, using dpi or dpcm |
| scan | The scanning process of the output device |
| scripting | Is scripting (e.g. JavaScript) available? |
| shape | Is the viewport in a circular or a rectangular shape? |
| update | How quickly can the output device modify the appearance of the content |
| video-dynamic-range | Combination of brightness, contrast ratio, and color depth that are supported by the video plane of user agent and the output device |
| width | The viewport width |
