MediaQueryList object

Maintains a list of media queries for a document and provides properties and methods to check for matches or receive callbacks when a media query changes.

Syntax


 mql = window.matchMedia("(min-height:250px)");

DOM Information

Inheritance Hierarchy

The MediaQueryList does not inherit from any class or interface.

Members

The MediaQueryList object has these types of members:

Methods
Properties

Methods

The MediaQueryList object has these methods.

Method	Description
addListener	Adds the callback function to the list of listeners for the MediaQueryList object. The function is called whenever the evaluation of the media query changes.
removeListener	Removes the given callback function from the list of listeners for this MediaQueryList object.

Properties

The MediaQueryList object has these properties.

Property	Access type	Description
matches	Read-only	Returns TRUE if the list of media queries matches the state of the current window, or FALSE otherwise.
media	Read-only	Returns the serialized version of the media query list that was used to create the MediaQueryList (MQL) object.

Standards information

CSSOM View Module, Section 4.1

Remarks

The following example displays a message as when the windows size is less or greater than 250 pixels.

Examples

HTML


mql = window.matchMedia("(min-height:250px)");
mql.addListener(sizeChange);
function sizeChange(mql) {
    v = document.getElementById("myDiv");
    if (mql.matches) {
        v.innerHTML = "getting big" + "<br/>" + mql.media;
    } else {
        v.innerHTML = "getting small" + "<br/>"+ mql.media;
    }
}