Baseline Widely available
The MediaQueryListEvent object stores information on the changes that have happened to a MediaQueryList object â instances are available as the event object on a function referenced by a change event.
MediaQueryListEvent()
Creates a new MediaQueryListEvent instance.
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.
The MediaQueryListEvent interface inherits methods from its parent interface, Event.
const para = document.querySelector("p"); // This is the UI element where to display the text
const mql = window.matchMedia("(width <= 600px)");
mql.addEventListener("change", (event) => {
if (event.matches) {
// The viewport is 600 pixels wide or less
para.textContent = "This is a narrow screen â less than 600px wide.";
document.body.style.backgroundColor = "red";
} else {
// The viewport is more than 600 pixels wide
para.textContent = "This is a wide screen â more than 600px wide.";
document.body.style.backgroundColor = "blue";
}
});
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.4