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.

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

Schreibe einen Kommentar

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