Wie man Medienabfragen mit JavaScript verwendet

Media-Abfragen mit JavaScript verwenden

Die Medienabfrage wurde in CSS3 eingeführt und ist eines der Schlüsselelemente des responsiven Webdesigns. Die Medienabfrage wird verwendet, um die Breite und Höhe des Viewports zu bestimmen, um sicherzustellen, dass die Webseite auf allen Geräten (Desktop-Computer, Laptops, Tablets, Smartphones usw.) gut angezeigt wird.

window.matchMedia() Die Methode matchMedia() gibt ein MediaQueryList-Objekt zurück, das die Ergebnisse der angegebenen CSS-Medienabfragekette darstellt.matchMedia() Der Wert der Methode kann sein CSS @media jegliche Medienkennung nach Regeln, z.B. min-height,min-width,Orientierung u.ä.

Beispiel

Wenn die Breite des Viewports kleiner oder gleich 700 Pixel ist, ändern Sie die Hintergrundfarbe in Gelb. Wenn die Breite größer als 700 Pixel ist, ändern Sie sie in Rosa:

function myFunction(x) {
  if (x.matches) { // Wenn die Medienabfrage übereinstimmt
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// Erstellen Sie ein MediaQueryList-Objekt
var x = window.matchMedia("(max-width: 700px)");
// Rufen Sie die Listener-Funktion bei der Laufzeit auf
myFunction(x);
// Hängen Sie eine Listener-Funktion beim Ändern des Status an
x.addEventListener("change", function() {
  myFunction(x);
);

Versuchen Sie es selbst

Verwandte Seiten

Anleitung:CSS 媒体查询

Anleitung:Responsive Webdesign

Referenzhandbuch:JavaScript-Funktion window.matchMedia()