Window matchMedia() Methode

Definition und Verwendung

matchMedia() Die Methode gibt einen MediaQueryList mit den Abfrageergebnissen zurück.

Siehe auch:

MediaQueryList-Objekt

Medienabfrage

Die Medienabfrage der matchMedia()-Methode kann jede Medienmerkmal der CSS @media-Regel sein, z.B. min-height, min-width, orientation usw.

Beispiel

matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);

Beispiel

Beispiel 1

Ist der Bildschirm-/Viewportbreite größer als 700 Pixel?

if (window.matchMedia("(max-width: 700px)").matches) {
  //Viewportbreite 700 Pixel oder weniger
} else {
  //Viewportbreite größer als 700 Pixel
}

Versuchen Sie es selbst

Beispiel Erklärung

Dieses Beispiel führt die mediaQuery aus und vergleicht sie mit dem aktuellen Fensterszustand.

Fügen Sie einen Ereignisbeobachter zum MediaQueryList-Objekt hinzu, um auf Änderungen des Fensterszustands zu reagieren (siehe unten "Mehr Beispiele"):

Beispiel 2

Wenn derViewportbreite 500 Pixel oder weniger beträgt, setzen Sie die Hintergrundfarbe auf gelb, andernfalls auf rosa:

// Erstellen Sie eine match-Funktion
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// // Erstellen Sie ein MediaQueryList-Objekt
const mmObj = window.matchMedia("(max-width: 700px)");
// Rufen Sie die match-Funktion bei der Laufzeit auf:
myFunction(mmObj);
// Fügen Sie eine match-Funktion als Zustandsänderungs-Beobachter hinzu:
mmObj.addListener(myFunction);

Versuchen Sie es selbst

Syntax

window.matchMedia("mediaQuery)

Parameter

Parameter Beschreibung
mediaQuery Erforderlich. Eine Zeichenkette, die die Medienabfrage darstellt.

Rückgabewert

Typ Beschreibung
Objekt Mit dem MediaQueryList-Objekt mit den Ergebnissen der Medienabfrage.

Browserunterstützung

Alle Browser unterstützen dies matchMedia():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützung 11 Unterstützung Unterstützung Unterstützung Unterstützung