Enquire.js – Media Query Callbacks in JavaScript

Screenshot der Enquire.js Homepage

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

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...
Bildeffekte in JavaScript mit glfx.js Bilder erst auf dem Client zu manipulieren wird immer beliebter, vor allem wenn es um Animationen geht. Ich kann mich da noch an eine Zeit erinnern, w...
PouchDB – CouchDB mit Javascript Ich habe ja schon desöfteren verkündet, das man nicht alles mit MySQL todschlagen muss. Zum einen gibt es sinnvolle Key-Value-Stores, zum anderen Date...
LimeJS – HTML5 Spiele Framework Darüber das HTLM5 der Weg in die Zukunft ist, und nicht Flash, lasse ich mich heute mal nicht aus (dann haut ihr mich wieder!:) Aber es ist schön anzu...

Ein Kommentar

Schreibe einen Kommentar