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 unmittelbare als auch ereignisgesteuerte Übereinstimmungen mit dem Status des Dokuments.

Sie können eine MediaQueryList erstellen, indem Sie matchMedia() auf dem window Objekt aufrufen. Das resultierende Objekt übernimmt 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 ergeben).

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

EventTarget MediaQueryList

Instanz-Eigenschaften

Das MediaQueryList-Interface erbt Eigenschaften von seinem Eltern-Interface, EventTarget.

matches Schreibgeschützt

Ein boolescher Wert, der true zurückgibt, wenn das document derzeit mit der Media Query-Liste übereinstimmt, andernfalls false.

media Schreibgeschützt

Ein String, der eine serialisierte Media Query darstellt.

Instanz-Methoden

Das MediaQueryList-Interface erbt Methoden von seinem Eltern-Interface, EventTarget.

addListener()

Fügt der MediaQueryList einen Callback hinzu, der aufgerufen wird, wann immer sich der Media Query-Status ändert—ob das Dokument mit den Media Queries in der Liste übereinstimmt oder nicht. Diese Methode existiert hauptsächlich aus Gründen der Abwärtskompatibilität; wenn möglich, sollten Sie stattdessen addEventListener() verwenden, um das change Ereignis zu überwachen.

removeListener()

Entfernt den angegebenen Listener-Callback aus den Callbacks, die aufgerufen werden sollen, wenn sich der MediaQueryList-Status der Media Query ändert, was passiert, wenn das Dokument zwischen Übereinstimmen und Nicht-Übereinstimmen der Media Queries in der MediaQueryList wechselt. Diese Methode wurde aus Gründen der Abwärtskompatibilität beibehalten; wenn möglich, 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 gesendet:

change

Wird an die MediaQueryList gesendet, wenn sich das Ergebnis des Ausführens der Media Query gegen das Dokument ändert. Zum Beispiel, wenn die Media Query (min-width: 400px) ist, wird das change-Ereignis jedes Mal ausgelöst, wenn sich die Breite des Viewport 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 Media Query-Status ändert, und führt eine benutzerdefinierte Funktion aus, um das Erscheinungsbild der Seite zu ändern.

js
const para = document.querySelector("p");
const mql = window.matchMedia("(max-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 finden dieses Beispiel auf GitHub (siehe den Quellcode, und sehen Sie es auch live in Aktion).

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

Spezifikationen

Specification
CSSOM View Module
# the-mediaquerylist-interface

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch