201313Mär

Enquire.js: Media Queries durch JavaScript erweitern

Der Einsatz von Media Queries kann die Umsetzung von responsiven und mobilen Web-Projekten erheblich erleichtern. So kann sehr einfach auf bestimmte Bildschirmauflösungen und Fenstergrößen mit entsprechenden CSS-Stilen reagiert werden. Da hier jedoch nur visuelle Anpassungen möglich sind, liegt es nahe, dass mit einem Media Query auch JavaScript-Code verbunden ist. Wer für diesen Fall eine einfache Lösung sucht, ist mit dem Skript Enquire.js bestens bedient.

Enquire.js - Awesome Media Queries in JavaScript

Damit lassen sich Media Queries in JavaScript mit der gewohnten CSS3-Schreibweise "screen and (max-width:1000px)" verwenden. Das Skript bietet die Möglichkeit, mehrere Ereignisse für Media Queries zu registrieren. Ein Beispiel für ein einfaches Media Query in JavaScript:

  • enquire.register("screen and (max-width:1000px)", {
  • match : function() {
  • console.log("handler max-width 1000px");
  • }
  • }).listen();

Die "listen()"-Funktion ist an die "resize"- und "orientationChange"-Events des Browser geknüpft. Um hier zu viele Ereignisse zu vermeiden, wird die "listen()"-Funktion nur ausgelöst, wenn das Fenster innerhalb von 500 Millisekunden seine Größe geändert hat.
Die Bibliothek gibt es wieder bei GitHub und auf der Website finden sich auch Informationen zu einem Polyfill für ältere Browser.