YouTipMet Win Matchmedia
# Window matchMedia() Method
[ Window Object](#)
* * *
## Definition and Usage
matchMedia() returns a new MediaQueryList object that represents the result of parsing the specified media query string.
The value of the matchMedia() method can be any feature of a [CSS @media rule](#), such as **min-height, min-width, orientation**, etc.
The MediaQueryList object has the following two properties:
* **media**: The content of the query string.
* **matches**: Used to detect the query result. If the document matches the media query list, the value is true; otherwise, it is false.
The **MediaQueryList** object can also listen for events. By listening, a specified callback function is called when the query result changes.
| Method | Description |
| --- | --- |
| addListener(_functionref_) | Adds a new listener function that is executed when the media query result changes. |
| removeListener(_functionref_) | Removes a previously added listener from the media query list. If the specified listener is not in the list, no action is taken. |
## Syntax
window.matchMedia(mediaQueryString)
**Parameter Description:**
* mediaQueryString: Required. A string representing the media query for which a new MediaQueryList object will be returned.
**Return Value**
Returns a MediaQueryList object.
* * *
## Browser Support
The numbers in the table indicate the first browser version that supports this method.
| Method | | | | | |
| --- | --- | --- | --- | --- | --- |
| matchMedia() | 9.0 | 10.0 | 6.0 | 5.1 | 12.1 |
* * *
## Examples
## Example
Determine the screen (screen/viewport) window size:
if(window.matchMedia("(max-width: 700px)").matches){/* Window is less than or equal to 700 pixels */}else{/* Window is greater than 700 pixels */}
[Try it »](#)
## Example
Determine the screen (screen/viewport) window size, change the background color to yellow when less than or equal to 700 pixels, and change the background color to pink when greater than 700 pixels:
function myFunction(x){if(x.matches){// Media query document.body.style.backgroundColor = "yellow"; }else{document.body.style.backgroundColor = "pink"; }}var x = window.matchMedia("(max-width: 700px)")myFunction(x)// Listener function called on execution x.addListener(myFunction)// Add listener when state changes
[Try it »](#)
* * Window Object](#)