Drücke die Tasten ◄ ► für weitere Artikel  

Responsive JavaScript für vereinfachte Media Queries

OnMediaQuery ist ein kleines JavaScript, das bei der Entwicklung von responsiven Weblayouts die Arbeit erleichtert, indem das verteilte Absetzen von Media Queries an mehreren Stellen im Stylesheet und im JavaScript-Code entfällt. Wir stellen euch kurz vor, wie OnMediaQuery funktioniert.

Responsive JavaScript für vereinfachte Media Queries
Media Queries mit OnMediaQuery-JavaScript

Eine elegante Alternative zu window.matchMedia()

Die JavaScript-Funktion window.matchMedia() ist eine geeignete Lösung für die Arbeit mit und das Abfragen von Viewport-Eigenschaften wie z.B. Breite oder Ausrichtung eines Endgerätdisplays, um danach das Layout dementsprechend anzupassen. Allerdings muß man dafür die Haltepunkte der Media Queries in den CSS-Dateien und im JavaScript-Code nachpflegen.

Mit OnMediaQuery hat Josh Bar von Springload eine elegante Lösung auf Basis der von Jeremy Keith vorgestellten conditional CSS-Eigenschaften entwickelt, die über wenige Zeilen ausgelesen werden können. Jeremy nutzt die :after Pseudo-CSS-Eigenschaften für das <body> Tag, um Informationen zum aktuellen Viewport zu ergänzen. Das CSS-Markup ist übersichtlich und sieht wie folgt aus:

OnMediaQuery: Media Queries mit :after Pseudo-CSS-Eigenschaften

Um JavaScript auszuführen, sobald sich etwas an den Media Queries ändert, hat Josh das kleine OnMediaQuery-Modul ergänzt. Es wird ermittelt, ob sich die Fenstergröße ändert bzw. die body:after CSS-Eigenschaft wechselt, um dann Rückmeldung darüber zugeben:

OnMediaQuery: JavaScript-Code für vereinfachte Media Queries

Wenn z.B. das Browserfenster skaliert wird, überprüft OnMediaQuery, ob der Kontext sich geändert hat. Ein Vorteil von OnMediaQuery ist, dass Haltepunkte nur noch an einer Stelle definiert werden, und die Kommunikation zwischen JavaScript und einfacher und sauberer abläuft.

Wie man auf einfache Art und Weise weitere Media Queries über JavaScript mit OnMediaQuery ergänzt oder später wieder löscht, findet ihr im Orginalartikel bei Springload.

Weiterführende Links:

Bildnachweis für die Newsübersicht: aka mrJasonWeaver / flickr.com, Lizenz: CC-BY

70 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
4 Antworten
  1. von Thomas Quensen am 23.05.2012 (13:39Uhr)

    Interessanter Ansatz.
    Erwähnenswert wäre hierzu noch, dass der Code nicht im Internet Explorer (einschließlich 9 und 10Preview) und im Opera funktioniert.

  2. von Monika Steinberg am 23.05.2012 (13:51Uhr)

    @Thomas Quensen danke für die Ergänzung!

  3. von | Heynoon´s Gewäsch am 19.06.2012 (11:35Uhr)

    [...] Responsive JavaScript für vereinfachte Media Queries [...]

  4. von Mo am 13.07.2012 (19:49Uhr)

    Die Einbindung von canvas bzw. SVG (Scalable Vector Graphics) Elementen öffnet natürlich viele Türen um eine Website Geräteübergreifend, “Responsive” zu gestalten. Diese werden von den meisten Browsern jedoch (noch) lange nicht so gut unterstützt, wie CSS + CSS3 Befehle. Mit der Nutzung von CSS3 in Verbindung mit Media Queries lassen sich längst nicht mehr nur einfache Kreis- und Rechtecksformen erzeugen. Mit ein wenig kreativität lassen sich komplette Grafiken rein in CSS zeichnen.. diese Darstellung ist natürlich Geräteübergreifend und wird von allen Browsern unterstützt!
    Ein schönes Beispiel hierfür haben wir zur Visualisierung von Media Queries auf unserer Website bereitgestellt:
    http://www.colibrimedia.de/responsive_design/example.html

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema JavaScript
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“

Möchte man für unterschiedliche Geräte anpassungsfähige Websites erstellen, ist „Responsive Webdesign“ das Stichwort. Um sich damit vertraut zu machen, ist Designern und Entwicklern das Buch.. ... » weiterlesen

Responsive Webdesign, Teil 3: Darstellung von Galerien und Videos
Responsive Webdesign, Teil 3: Darstellung von Galerien und Videos

Mit der Serie „Responsive Webdesign“ wollen wir euch die Entwicklung flexibler Projekte erleichtern. In Teil 3 zeigen wir Möglichkeiten auf, Galerien, Videos, Bilder und Slider für die... » weiterlesen

SVGMagic: Automatischer SVG-Fallback für deine Webseite
SVGMagic: Automatischer SVG-Fallback für deine Webseite

SVG-Grafiken sind seit Responsive Webdesign und Retina-Display kaum hoch wegzudenken. Fall-Back-Lösungen sind jedoch ein hartes Stück Arbeit. Mit SVGMagic soll sich das ändern – wir zeigen euch w ... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen