Baseline Widely available
The change
event of the MediaQueryList
interface fires when the status of media query support changes.
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("change", (event) => { })
onchange = (event) => { }
Event type Event properties
The MediaQueryListEvent
interface inherits properties from its parent interface, Event
.
MediaQueryListEvent.matches
Read only
A boolean value that is true
if the document
currently matches the media query list, or false
if not.
MediaQueryListEvent.media
Read only
A string representing a serialized media query.
const mql = window.matchMedia("(max-width: 600px)");
mql.onchange = (e) => {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
console.log("This is a narrow screen â less than 600px wide.");
} else {
/* the viewport is more than 600 pixels wide */
console.log("This is a wide screen â more than 600px wide.");
}
};
Specifications Browser compatibility See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3