CSS, HTML und Javascript mit {stil}

window.matchMedia • Pendant zu Media Queries

Javascript matchMedia : Äquivalent zu CSS Media Queries

Media Queries erfragen Eigenschaften des Geräts, auf dem die Webseite gerendert wird. Zusätzlich kann Javascript mit matchMedia auf Änderungen der Ausrichtung oder der Größe des Fensters reagieren und z.B. Bilder in größeren oder kleineren Auflösungen zu laden.

CSS Media Queries verzweigen je nach Eigenschaft des Viewports auf unterschiedliche CSS-Bereiche, um das Design oder Funktionen der Webseite an die Breite, Höhe, Orientierung oder Auflösung des Monitors, Tabletts oder Smartphones anzupassen.

<link rel="stylesheet" media="all" href="style.css" />
<link rel="stylesheet" media="(min-width:60em)" href="style.css" />

oder

@media screen and (min-width:720px) {
}

matchMedia

Äquivalent zur Media Query in CSS gibt es in JavaScript window.matchMedia. Fast immer reicht die Verzweigung via CSS, aber es kann auch erforderlich sein, zusätzlich mit Javascript einzugreifen, z.B., wenn die Änderung der Orientierung des Geräts zur Umordnung von Elementen führt oder wenn ein Attribut nicht einfach durch CSS geändert werden kann.

matchMedia wird von den modernen Browsern und von IE ab IE10 unterstützt.

var mql = window.matchMedia("screen and (min-width:720px)");

matchMedia erweitert das Arsenal der Anpassungen.

Bilder für kleine Monitore

Bildern im Querformat sind auf dem Monitor des Handys nur ein Streifen, in dem man kaum etwas erkennt. Zeigen wir auf kleinen Monitoren doch einfach einen relevanten Ausschnitt!
var postman = document.querySelector ('#postman');
var mql = window.matchMedia("(min-width:740px)");

// Beim Laden Bildausschnitt initialisieren
clipImage(mql);

// Spezieller Event Listener für MediaQueryList
mql.addListener(clipImage);

function clipImage(mql) {
    if (mql.matches) {
        postman.setAttribute('viewBox','0 0 1436 731');
        console.log ('Großes Browserfenster: min-width:740px');
    } else {
        postman.setAttribute('viewBox','180 120 600 600');
        console.log ('Kleines Browserfenster min-width:740px ist false');
    }
}

Das SVG-ViewBox-Attribut legt den sichtbaren Ausschnitt einer Grafik fest und kann nicht durch CSS angesprochen werden. clipImage(mql) ändert ViewBox-Attribut, um das Bild auf großen Monitoren in voller Breite und auf kleinen Monitoren als Ausschnitt zu zeigen.

var mql = window.matchMedia ("(min-width:740px)") legt ein MediaQueryList-Objekt mit Bedingungen (hier "(min-width:740px)") an. Das MediaQueryList-Objekt hat zwei Eigenschaften: matches (true oder false) und media.

matchMedia Bedingungen

Die Bedingung kann auch komplexer formuliert sein – was in einer CSS @media-Regel steht, kann als Bedingung für matchMedia eingesetzt werden.

var mql = window.matchMedia("(min-width:740px) or (orientation: landscape)");

MediaQueryList
    matches: true
    media: "(min-width:740px) or (orientation: landscape)"

Der Event Handler clipImage muss einmal direkt nach der Definition des Events aufgerufen werden, damit das Script initialisiert wird, sobald die Seite geladen wurde.

mql.addListener(clipImage) ist ein spezieller Event Listener, der feuert, wenn die Bedingung (min-width:740px) zutrifft. Das ist effizienter als das periodische Abfangen eines resize-Events.

matchesBoolean, prüft, ob die Bedingung des CSS-Query-Strings zutrifft
mediaGibt ein neues MediaQueryList-Objekt zurück, associated with the Window object, with