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 über eine Media Query, die auf ein Dokument angewendet wird, und unterstützt sowohl sofortige als auch ereignisgesteuerte Übereinstimmungen mit dem Zustand des Dokuments.

Sie können eine MediaQueryList erstellen, indem Sie matchMedia() auf dem window-Objekt aufrufen. Das resultierende Objekt sendet Benachrichtigungen an die Zuhörer, wenn sich der Zustand der Media Query ändert (d.h. wenn der Test der Media Query beginnt oder aufhört, true zu sein).

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 regelmäßig abzufragen. Es ermöglicht Ihnen, programmgesteuert Änderungen an einem Dokument basierend auf dem Status der Media Query vorzunehmen.

EventTarget MediaQueryList

Instanzeigenschaften

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

matches Schreibgeschützt

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

media Schreibgeschützt

Ein String, der eine serialisierte Media Query darstellt.

Instanzmethoden

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

addListener()

Fügt eine Rückruffunktion zur MediaQueryList hinzu, die jedes Mal aufgerufen wird, wenn sich der Status der Media Query ändert—ob das Dokument nun den Media Queries in der Liste entspricht oder nicht. Diese Methode existiert hauptsächlich aus Gründen der Abwärtskompatibilität; wenn möglich, sollten Sie stattdessen addEventListener() verwenden, um auf das change Ereignis zu achten.

removeListener()

Entfernt den angegebenen Rückruf-Zuhörer aus den Rückrufen, die aufgerufen werden, wenn sich der Medienabfragestatus der MediaQueryList ändert, was jedes Mal passiert, wenn das Dokument zwischen Übereinstimmung und Nicht-Übereinstimmung mit den in der MediaQueryList aufgeführten Media Queries wechselt. Diese Methode wurde aus Gründen der Abwärtskompatibilität beibehalten; wenn möglich, sollten Sie normalerweise removeEventListener() verwenden, um Änderungsbenachrichtigungs-Rückrufe 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 das Ergebnis des Ausführens der Media Query gegen das Dokument sich ändert. Zum Beispiel, wenn die Media Query (min-width: 400px) ist, wird das change-Ereignis jedes Mal ausgelöst, wenn sich die Breite des Viewports des Dokuments so ändert, dass seine Breite die 400px-Grenze in beide Richtungen überschreitet.

Beispiele

Dieses Beispiel erstellt eine MediaQueryList und richtet anschließend einen Zuhörer ein, um zu erkennen, wann sich der Status der Media Query ändert. Wenn dies geschieht, wird eine benutzerdefinierte Funktion ausgeführt, die das Erscheinungsbild der Seite ändert.

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 können dieses Beispiel auf GitHub finden (siehe den Quellcode, und sehen Sie es sich auch live an).

Sie können andere Beispiele auf den einzelnen Eigenschafts- und Methodenseiten finden.

Spezifikationen

Specification
CSSOM View Module
# the-mediaquerylist-interface

Browser-Kompatibilität

Siehe auch