HTML | window matchMedia() Method
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:
- 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:
<!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
Share your thoughts in the comments
Please Login to comment...