A MediaQueryList object stores information on a media query applied to a document, with support for both immediate and event-driven matching against the state of the document.

MDN Reference

interface MediaQueryList {
    matches: boolean;
    media: string;
    onchange: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null;
    addEventListener<K extends "change">(
        type: K,
        listener: (this: MediaQueryList, ev: MediaQueryListEventMap[K]) => any,
        options?: boolean | AddEventListenerOptions,
    ): void;
    addEventListener(
        type: string,
        listener: EventListenerOrEventListenerObject,
        options?: boolean | AddEventListenerOptions,
    ): void;
    addListener(
        callback:
            | ((this: MediaQueryList, ev: MediaQueryListEvent) => any)
            | null,
    ): void;
    dispatchEvent(event: Event): boolean;
    removeEventListener<K extends "change">(
        type: K,
        listener: (this: MediaQueryList, ev: MediaQueryListEventMap[K]) => any,
        options?: boolean | EventListenerOptions,
    ): void;
    removeEventListener(
        type: string,
        listener: EventListenerOrEventListenerObject,
        options?: boolean | EventListenerOptions,
    ): void;
    removeListener(
        callback:
            | ((this: MediaQueryList, ev: MediaQueryListEvent) => any)
            | null,
    ): void;
}
Hierarchy
  • EventTarget
    • MediaQueryList
Index

Properties

matches: boolean

The matches read-only property of the true if the document currently matches the media query list, or false if not.

MDN Reference

media: string

The media read-only property of the serialized media query.

MDN Reference

onchange: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null

Methods

  • The deprecated addListener() method of the MediaQueryListener that will run a custom callback function in response to the media query status changing.

    Parameters

    Returns void

    MDN Reference

  • The dispatchEvent() method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order.

    MDN Reference

    Parameters

    • event: Event

    Returns boolean

  • The removeEventListener() method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.

    MDN Reference

    Type Parameters

    • K extends "change"

    Parameters

    Returns void

  • The removeEventListener() method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.

    MDN Reference

    Parameters

    Returns void