MediaQueryList

Instanz-Eigenschaften

Die MediaQueryList-Schnittstelle erbt Eigenschaften von ihrer Elternschnittstelle, EventTarget.

matches Schreibgeschtzt

Ein boolescher Wert, der true zurckgibt, wenn das document derzeit der Media Query-Liste entspricht, oder false, wenn nicht.

media Schreibgeschtzt

Ein String, der eine serialisierte Media Query darstellt.

Instanz-Methoden

Die MediaQueryList-Schnittstelle erbt Methoden von ihrer Elternschnittstelle, EventTarget.

addListener()

Fgt der MediaQueryList einen Rckruf hinzu, der immer dann aufgerufen wird, wenn sich der Status der Media Query ndert ob das Dokument den Media Queries in der Liste entspricht oder nicht. Diese Methode existiert hauptschlich fr die Rckwrtskompatibilitt; wenn mglich, sollten Sie stattdessen addEventListener() verwenden, um das change-Ereignis zu berwachen.

removeListener()

Entfernt den angegebenen Listener-Rckruf aus den Rckrufen, die aufgerufen werden sollen, wenn sich der Status der Media Query in der MediaQueryList ndert, was jedes Mal passiert, wenn das Dokument zwischen einem passenden und nicht passenden Status der Media Queries in der MediaQueryList wechselt. Diese Methode wurde aus Grnden der Rckwrtskompatibilitt beibehalten; wenn mglich, sollten Sie im Allgemeinen removeEventListener() verwenden, um nderungsbenachrichtigungs-Rckrufe zu entfernen (die zuvor mit addEventListener() hinzugefgt worden sein sollten).

Ereignisse

Die folgenden Ereignisse werden an MediaQueryList-Objekte gesendet:

change

Wird an die MediaQueryList gesendet, wenn sich das Ergebnis der Ausfhrung der Media Query gegen das Dokument ndert. Wenn die Media Query beispielsweise (width >= 400px) lautet, wird das change-Ereignis jedes Mal ausgelst, wenn sich die Breite des Viewports des Dokuments so ndert, dass seine Breite die 400px-Grenze in jede Richtung berschreitet.

Beispiele

Dieses Beispiel erstellt eine MediaQueryList und richtet dann einen Listener ein, um zu erkennen, wann sich der Status der Media Query ndert, und eine benutzerdefinierte Funktion auszufhren, um das Aussehen der Seite zu ndern.

const para = document.querySelector("p");
const mql = window.matchMedia("(width <= 600px)");

function screenTest(e) {
  if (e.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";
  }
}

mql.addEventListener("change", screenTest);

Weitere Beispiele finden Sie auf den einzelnen Eigenschafts- und Methodenseiten.

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Media Queries
• Media Queries im Code verwenden
• window.matchMedia()
• MediaQueryListEvent
• Der Artikel Window.devicePixelRatio enthlt ebenfalls ein ntzliches Beispiel