Enquire.js – Media Query Callbacks in JavaScript

Media-Queries sind eine richtig schicke Angelegenheit, ohne die ein Responsive Design nicht möglich wäre. Ganz einfach ausgedrückt läuft die Sache so: mittels einer Media Query kann man für verschieden breite Browser (Bildschirmauflösungen) verschiedene CSS-Dateien laden, die den Content verschieden darstellen. Je nach Bildschirmbreite kann man zum Beispiel Elemente einblenden, oder ausblenden, man kann die Darstellung oder Fontgrößen ändern.

Screenshot der Enquire.js Homepage

Das nutzt einem aber nur bedingt, da man nicht nur die Darstellung einer Seite auf Mobile ändern will, sondern unter Umständen auch die Funktionalität. So zum Beispiel eine Preview in einem Suchfeld. Während man mit so etwas auf dem Desktop sehr gut arbeiten kann, so ist man im Mobile-Bereich darum bemüht nicht nur die Darstellung zu optimieren, sondern auch die Anzahl der Daten die übertragen werden müssen zu minimieren. Bin ich mit Edge online, werde ich keinen großen Spaß daran haben jQuery zu laden. An dieser Stelle kommt Enquire.js ins Spiel. Das Skript erlaubt einen Javascript Callback aufgrund von Media Queries – man kann also je nach Breite der Darstellung unterschiedlichen Code ausführen. Und das Tolle ist: minified ist Enquire.js sage & schreibe 0.8kb groß – also in Hinsicht Mobile fast vernachlässigbar.

Solltet ihr also in Sachen Responsive unterwegs sein schaut euch den kleinen Helfer einmal an – er wird wesentlich schneller geladen als komplexe JavaScript Bibliotheken, und leistet in Blick auf Media Queries und Callbacks das Gleiche.

Ähnliche Beiträge

Cartoview – Mashups Made Simple Zu jeder besseren Web2.0-Anwendung gehört heutzutage eine Map, sei es nur um Daten zu visualisieren, aber auch zur Nutzung von Location Based Services...
Shortest Path Algorithmus in JavaScript Als ich in der grauen Vorzeit Informatik studiert habe gab es im Grundstudium ein paar Algorithmen, auf denen jeder Professor bis zum Erbrechen rum ge...
Photoshop mit Javascript Zu sagen man kennt Photoshop nicht wäre als wenn ein Eisverkäufer mit der Gabel die Waffeln füllt. Erstaunlicherweise ist es aber so, dass nicht ein B...
Tutorial Google Maps API – die Anfänge mit JavaScr... Wie versprochen kommt heute der erste Teil des Google Maps Tutorials, dass sich primär mit der API an sich und JavaScript beschäftigen wird. Bevor wir...

Eine Antwort auf „Enquire.js – Media Query Callbacks in JavaScript“

  1. Pingback: Linkhub – Woche 33-2013

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.