DasMediaQueryListEvent-Objekt speichert Informationen über die Änderungen, die an einemMediaQueryList-Objekt vorgenommen wurden. Instanzen sind als das Ereignisobjekt in einer Funktion verfügbar, die von einemchange-Ereignis referenziert wird.

Konstruktor

MediaQueryListEvent()

Erstellt eine neue Instanz vonMediaQueryListEvent.

Instanz-Eigenschaften

DieMediaQueryListEvent-Schnittstelle erbt Eigenschaften von ihrer übergeordneten Schnittstelle,Event.

MediaQueryListEvent.matchesSchreibgeschützt

Ein boolean-Wert, dertrue ist, wenn dasdocument derzeit mit der Medienabfrageliste übereinstimmt, oderfalse, wenn nicht.

MediaQueryListEvent.mediaSchreibgeschützt

Ein String, der eine serialisierte Medienabfrage repräsentiert.

Instanz-Methoden

DieMediaQueryListEvent-Schnittstelle erbt Methoden von ihrer übergeordneten Schnittstelle,Event.

Beispiele

const para = document.querySelector("p"); // This is the UI element where to display the textconst 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";  }});

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Medienabfragen
• Verwendung von Medienabfragen im Code
• window.matchMedia()
• MediaQueryList