HTML | window matchMedia() Method

The window.matchMedia() method in html is used to return a MediaQueryList object which represents the result of the specified CSS media query string. The value of the matchMedia() method can be any of the media options of the CSS @media rule, like min-height, min-width, orientation, etc. The MediaQueryList object has two properties and two methods:

Property:
- matches: It is used to check the results of a query and it returns a boolean value.
- media: A String which represent the serialized media query list.
Method:
- addListener(functionref): Adds a new listener function, which is executed whenever the media query's evaluated result changes.
- removeListener(functionref): Removes a previously additional listener function from the media query list. Does nothing if the specified listener is not already in the list.

Syntax:

window.matchMedia( mediaQueryString )

Parameter Values:

mediaQueryString: String which represents the media query for which to return a new MediaQueryList object.

Return Value: This method returns the CSS media query string. Example:

html

<!DOCTYPE html>
<html>

<head>
    <title>Window matchMedia() Method</title>
</head>

<body>
    <center>
        <h1 style="color:green">GeeksforGeesks</h1>
        <h2>Window matchMedia() Method</h2>

        <script>
            function GFGFun(ar) {
                if (ar.matches) {
                    document.body.style.backgroundColor = "white";
                } else {
                    document.body.style.backgroundColor = "gray";
                }
            }

            var ar = window.matchMedia("(max-width: 850px)")
            GFGFun(ar)
            ar.addListener(GFGFun)
        </script>
    </center>
</body>

</html>

Output:

Before resize the browser window:
After resize the browser window:

Supported Browsers: The browsers supported by HTML window matchMedia() method are listed below:

Google Chrome
Internet Explorer
Firefox
Apple Safari
Opera

HTML | window matchMedia() Method

Explore