MediaQueryList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Ein MediaQueryList-Objekt speichert Informationen zu einer Media Query, die auf ein Dokument angewendet wird, mit Unterstützung sowohl für sofortige als auch ereignisgesteuerte Übereinstimmung mit dem Status des Dokuments.

Sie können eine MediaQueryList erstellen, indem Sie matchMedia() auf dem window-Objekt aufrufen. Das resultierende Objekt verwaltet das Senden von Benachrichtigungen an Listener, wenn sich der Status der Media Query ändert (d.h. wenn der Test der Media Query beginnt oder aufhört, true zu evaluieren).

Dies ist sehr nützlich für adaptives Design, da es ermöglicht, ein Dokument zu beobachten, um zu erkennen, wann sich seine Media Queries ändern, anstatt die Werte periodisch abzufragen, und ermöglicht es Ihnen, programmatisch Änderungen an einem Dokument basierend auf dem Media Query-Status vorzunehmen.

EventTarget MediaQueryList

Instanz-Eigenschaften

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

matches Schreibgeschützt

Ein boolescher Wert, der true zurückgibt, wenn das document derzeit den Media Query-Listen entspricht, oder false, wenn nicht.

media Schreibgeschützt

Ein String, der eine serialisierte Media Query darstellt.

Instanz-Methoden

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

addListener()

Fügt der MediaQueryList eine Callback-Funktion hinzu, die aufgerufen wird, wann immer sich der Status der Media Query ändert — ob das Dokument den Media Queries in der Liste entspricht oder nicht. Diese Methode existiert hauptsächlich aus Kompatibilitätsgründen; nach Möglichkeit sollten Sie stattdessen addEventListener() verwenden, um das change Ereignis zu überwachen.

removeListener()

Entfernt den angegebenen Listener-Callback aus den Rückrufen, die aufgerufen werden, wenn sich der Media Query-Status der MediaQueryList ändert, was passiert, wenn das Dokument zwischen der Übereinstimmung und der Nicht-Übereinstimmung mit den in der MediaQueryList aufgeführten Media Queries wechselt. Diese Methode wurde aus Gründen der Rückwärtskompatibilität beibehalten; nach Möglichkeit sollten Sie im Allgemeinen removeEventListener() verwenden, um Änderungsbenachrichtigungs-Callbacks zu entfernen (die zuvor mit addEventListener() hinzugefügt worden sein sollten).

Ereignisse

Die folgenden Ereignisse werden an MediaQueryList-Objekte übermittelt:

change

Wird an die MediaQueryList gesendet, wenn sich das Ergebnis der Ausführung der Media Query gegen das Dokument ändert. Wenn zum Beispiel die Media Query (width >= 400px) lautet, wird das change-Ereignis jedes Mal ausgelöst, wenn sich die Breite des Ansichtsfensters des Dokuments ändert, sodass seine Breite über die 400px-Grenze in beide Richtungen ü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 führt bei Änderung eine benutzerdefinierte Funktion aus, um das Erscheinungsbild der Seite zu ändern.

js
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);

Hinweis: Sie können dieses Beispiel auf GitHub finden (siehe den Quellcode, und sehen Sie es auch live laufen).

Sie können weitere Beispiele auf den einzelnen Seiten zu Eigenschaften und Methoden finden.

Spezifikationen

Specification
CSSOM View Module
# the-mediaquerylist-interface

Browser-Kompatibilität

Siehe auch