How TO - Medienabfragen mit JavaScript
Beispiel
Wenn das Ansichtsfenster kleiner oder gleich 700 Pixel breit ist, ändern Sie die Hintergrundfarbe in Gelb. Wenn es größer als 700 ist, ändern Sie es in rosa
function myFunction(x) {
if (x.matches) { // If media
query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call
listener function at run time
x.addListener(myFunction) // Attach listener
function on state changes
Verwenden von Medienabfragen mit JavaScript
Medienabfragen wurden in CSS3 eingeführt und sind eine der wichtigsten Zutaten für responsives Webdesign. Medienabfragen werden verwendet, um die Breite und Höhe eines Darstellungsbereichs zu bestimmen, damit Webseiten auf allen Geräten (Desktops, Laptops, Tablets, Telefone usw.) gut aussehen.
Die Methode window.matchMedia() gibt ein MediaQueryList-Objekt zurück, das die Ergebnisse der angegebenen CSS-Medienabfragezeichenfolge darstellt. Der Wert der Methode matchMedia() kann eine der Medienfunktionen der CSS-@media -Regel sein, wie z. B. Mindesthöhe, Mindestbreite, Ausrichtung usw.
Erfahren Sie mehr über Medienabfragen in unserem Tutorial zu CSS-Medienabfragen
Erfahren Sie mehr über Responsive Design in unserem Responsive Webdesign Tutorial
Erfahren Sie mehr über die Methode window.matchMedia() in unserer JavaScript-Referenz.