MediaQueryList

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Ein MediaQueryList-Objekt speichert Informationen über eine Media Query, die auf ein Dokument angewendet wird, mit Unterstützung für sowohl sofortige als auch ereignisgesteuerte Abgleiche mit dem Zustand des Dokuments.

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

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 ermöglicht es Ihnen, programmatisch Änderungen an einem Dokument basierend auf dem Status der Media Query vorzunehmen.

EventTarget MediaQueryList

In diesem Artikel

Instanz-Eigenschaften

Die MediaQueryList-Schnittstelle erbt Eigenschaften von ihrer Elternschnittstelle, 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.

Instanz-Methoden

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

addListener()

Fügt der MediaQueryList einen Rückruf 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 hauptsächlich für die Rückwärtskompatibilität; wenn möglich, sollten Sie stattdessen addEventListener() verwenden, um das change-Ereignis zu überwachen.

removeListener()

Entfernt den angegebenen Listener-Rückruf aus den Rückrufen, 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 Gründen der Rückwärtskompatibilität beibehalten; wenn möglich, sollten Sie im Allgemeinen 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 sich das Ergebnis der Ausführung der Media Query gegen das Dokument ändert. Wenn die Media Query beispielsweise (width >= 400px) lautet, 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 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 auszuführen, um das Aussehen 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 auch live laufen sehen).

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

Media Queries
Media Queries im Code verwenden
window.matchMedia()
MediaQueryListEvent
Der Artikel Window.devicePixelRatio enthält ebenfalls ein nützliches Beispiel

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

CSSOM view API
MediaQueryList
Instanzeigenschaften
1. matches
2. media
Instanzmethoden
1. addListener()
2. removeListener()
Events
1. change
Vererbung
1. EventTarget
Verwandte Seiten für CSSOM view API
Anleitungen
1. Koordinatensysteme
2. Ansichten-Konzepte