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

TransformJS – einfache Transforms mit JavaSc... CSS Transforms sind eigentlich fester Bestandteil jedes Browser - dummerweise in jedem Browser ein klein wenig anders, und dummerweise auch mit andere...
melonJS – Spieleentwicklung in HTML5 Spieleentwicklung in HTML5 ist "the next big thing" - aber das ist nicht wirklich was Neues. Es geht inzwischen auch nicht mehr wirklich um das ob, so...
TaffyDB – Datenbank für JavaScript In vielen Fällen läuft es heutzutage so, das Daten in Tabellen zum Beispiel nicht mehr direkt eingesetzt, sondern mittels AJAX nachgeladen werden. Ger...
Lint für jQuery Früher war alles besser, der Himmel war blauer, die Wiesen grüner und ich programmierte eine Mailbox-Software in Turbo Pascal und wurde in der Uni daz...

Ein Kommentar

Schreibe einen Kommentar