HTML | window matchMedia() Method (original) (raw)

Last Updated : 21 Nov, 2019

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:

  1. 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.
  2. 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:

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

html `

Window matchMedia() Method

GeeksforGeesks

Window matchMedia() Method

    <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>

`

Output:

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