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

Wieso man Javascript nicht im Head lädt (und im Fo... Ich kann mich noch erinnern als Anfang der 90er Javascript noch ein außerirdisches Mysterium war, und zwei Zeilen Inline-Javascript das höchste der Ge...
Multiple File Uploads, HTML und Open Source Formulare lassen sich inzwischen ganz gut designen, allerdings gibt es ein Formularelement, das alle Design-Versuche vehement abwehrt: der Dateiupload...
Entwurfsmuster für JavaScript Entwurfsmuster (englisch: Design Patterns) sind eine Art Best Practice für Programmiersprachen. Also der optimale Weg ein Ziel zu erreichen. Entwurfsm...
jsPDF – PDF-Dateien mit JavaScript erzeugen PDF-Dateien sind aus der modernen Geschäftswelt nicht mehr wegzudenken, was insbesondere bedeutet das man diese in einer Applikation erzeugen muss. PD...

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.