Definition: Media Query
Was bedeutet: Media Query
Media Queries sind eine CSS-Technik, die es ermöglicht, das Design einer Website flexibel an verschiedene Bildschirmgrößen und Geräteeigenschaften (wie Smartphones, Tablets oder Desktops) anzupassen. Sie bilden damit das technische Fundament für Responsive Design, indem sie Layout-Regeln nur dann aktivieren, wenn bestimmte Bedingungen – wie eine maximale Bildschirmbreite – erfüllt sind.
Die Definition einer Media Query (deutsch: Medienabfrage) beschreibt eine Technik in der Stylesheet-Sprache CSS (Cascading Stylesheets), die es ermöglicht, das Design einer Website an die spezifischen Eigenschaften des Endgeräts anzupassen.
Man kann sich Media Queries wie ein logisches Sieb vorstellen: Der Browser fragt das Gerät ab: „Wie breit ist dein Bildschirm?“ oder „Bist du ein Drucker oder ein Monitor?“. Basierend auf der Antwort (z. B. „Der Bildschirm ist schmaler als 768 Pixel“) spielt die Media Query spezielle Design-Regeln aus. So wird aus einem dreispaltigen Layout am Desktop automatisch eine einspaltige Ansicht auf dem Smartphone. Media Queries sind das Herzstück moderner, mobiler Websites und sorgen dafür, dass die Benutzererfahrung (User Experience) auf jedem Gerät optimal bleibt.
FAQ - Häufig gestellten Fragen zum Begriff: Media Query
Warum sind Media Queries heute wichtiger als früher?
Früher gab es nur wenige Standard-Bildschirmgrößen. Heute surfen Nutzer auf winzigen Smartwatches, Smartphones, Tablets, Laptops und riesigen 4K-Monitoren. Ohne Media Queries würde eine Website auf mobilen Geräten entweder winzig klein oder völlig zerschossen dargestellt werden. Sie ermöglichen es uns, eine einzige Website für alle Endgeräte zu bauen.
Was ist der Unterschied zwischen „Mobile First“ und herkömmlichen Media Queries?
Beim „Mobile First“-Ansatz schreiben wir zuerst den Code für die kleinste Ansicht (Smartphone). Media Queries fügen dann erst bei größeren Bildschirmen zusätzliche Funktionen oder Spalten hinzu. Das macht die Website auf dem Handy schneller, da nur der notwendige Code geladen wird. Wir nutzen diesen Ansatz standardmäßig, um die Performance zu maximieren.
Was sind „Breakpoints“ im Zusammenhang mit Media Queries?
Breakpoints (Umbruchpunkte) sind die exakten Pixel-Werte, bei denen sich das Layout einer Website ändert. Ein typischer Breakpoint liegt oft bei 768px (Übergang von Smartphone zu Tablet). Als Webdesigner definieren wir diese Punkte so, dass das Design an keiner Stelle „bricht“, sondern fließend in die nächste Größe übergeht.
Können Media Queries noch mehr als nur die Breite abfragen?
Ja, sie sind sehr mächtig! Wir können damit auch die Orientierung (Hochformat oder Querformat), die Bildschirmauflösung (für scharfe Bilder auf Retina-Displays) oder sogar Benutzereinstellungen wie den „Dark Mode“ abfragen. So passt sich Ihre Website sogar dem Farbschema an, das Ihr Kunde in seinem Betriebssystem bevorzugt.