JavaScript MediaQueryList API

MediaQueryList object

MediaQueryList The object stores information from media queries.

MediaQueryList The object isWindow objectThe properties.

MediaQueryList The object can be accessed in the following way:

window.matchMedia() or simply matchMedia():

Example

const mqlObj = window.matchMedia();
const mqlObj = matchMedia();

Try it yourself

See also:

window.matchMedia() method

MediaQueryList attribute

Attribute Description
matches Boolean value. If the document matches the query, then true, otherwise false.
media String value. Media query (list).

MediaQueryList method

Method Description
addListener() Add a new listener function that will be executed every time the evaluation result of the media query changes.
removeListener()

Remove the previously added listener function from the media query list.

If the specified listener is not in the list, do nothing.

Media query

matchMedia() The media query method can be CSS @media Rule Any media feature, such as min-height, min-width, orientation, etc.

Example

matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);

Try it yourself

Media type

Value Description
all Default. Used for all media type devices.
print Used for printers.
screen Used for computer screens, tablets, smartphones, and more.
speech Screen readers used to read pages aloud.

Media feature

Value Description
any-hover Is there any available input mechanism that allows the user to hover the mouse over elements?
(Added in Media Queries Level 4).
any-pointer Is there any available input mechanism, such as a pointing device, and if so, how accurate is it?
(Added in Media Queries Level 4).
aspect-ratio The aspect ratio of the viewport.
color The number of bits for each color component of the output device.
color-gamut The approximate color range supported by user agents and output devices
Does the main input mechanism allow users to hover over elements?
color-index color-index
The number of colors that the device can display. grid
Is the device a grid or bitmap. height
Viewport height. hover
Does the main input mechanism allow users to hover over elements?
(Added in Media Queries Level 4) inverted-colors
(Added in Media Queries Level 4).
Does the browser or underlying operating system invert colors? light-level
The current light level of the environment (Added in Media Queries Level 4). The maximum aspect ratio of the display area.
max-color The maximum number of bits for each color component of the output device.
max-color-index The maximum number of colors that the device can display.
max-height The maximum height of the display area, such as the browser window.
max-monochrome The maximum number of bits for each 'color' on monochrome (grayscale) devices.
max-resolution The maximum resolution of the device, using dpi or dpcm.
max-width The maximum width of the display area, such as the browser window.
min-aspect-ratio The minimum aspect ratio of the display area.
min-color The minimum number of bits for each color component of the output device.
min-color-index The minimum number of colors that the device can display.
min-height The minimum height of the display area, such as the browser window.
min-monochrome The minimum number of bits for each 'color' on monochrome (grayscale) devices.
min-resolution The minimum resolution of the device, using dpi or dpcm.
min-width The minimum width of the display area, such as the browser window.
monochrome The number of bits for each 'color' on monochrome (grayscale) devices.
orientation The orientation of the viewport (landscape or portrait mode).
overflow-block How does the output device handle the content overflowing along the block axis (Added in Media Queries Level 4)?
overflow-inline Can the content overflowing along the inline axis be scrolled (Added in Media Queries Level 4)?
pointer Is the main input mechanism a pointing device? If so, how accurate is it?
(Added in Media Queries Level 4).
resolution The resolution of the output device, using dpi or dpcm.
scan Scan the process of the output device.
scripting Can scripts (such as JavaScript) be used? (added in Media Queries Level 4)
update How fast the output device can modify the appearance of the content (added in Media Queries Level 4).
width Viewport Width.