Dies ist eine alte Version des Dokuments!
Responsive Webdesign - Media Queries (CSS3)
Einleitung
Für die Umsetzung von Responsive Webdesign sind mit CSS3 die Media Queries (Medienabfragen) hinzugekommen. Media Queries sind mächtiger als die veralteten Media Types und flexibler. Sie prüfen die Merkmale von Ausgabegeräten detaillierter und können die alten Media Types einbeziehen. Damit können Medien bezüglich der Grösse des Geräts, Bildschirmauflösung, Orientierung (Hoch- oder Querformat) oder Eingabemöglichkeiten (Maus, Touch, Tastatur, Sprache) abgefragt werden, um ein entsprechendes Design zurückzuliefern. Die häufigste Abfrage ist die Breite des Webbrowser-Fensters.
Media Queries einbinden und anwenden
Media Queries können auf verschiedene Arten eingebunden und verwendet werden. Die Verwendung einer solchen Medienabfrage in HTML wird nachfolgend dargelegt.
In erster Linie nutzen Media Queries für das Responsive Webdesign sogenannte Breakpoints, an denen sich die Darstellung ändert. Ein Breakpoint ist also der Punkt, an dem das Design auf ein anderes Layout umspringt. Hier ist ein Beispiel für eine Medienabfrage, die den Inhalt zurückgibt, wenn die Breite des Geräts kleiner oder gleich 420px ist:
(max-width: 420px)