Was sind Media Queries?

Was sind Media Queries und was machen diese Dinger eigentlich genau?

Mit Media Queries (deutsch: Medienabfragen) legst du fest, wie das Layout einer Website auf unterschiedlichen Endgeräten dargestellt wird. Du definierst darin zum Beispiel, ab welcher Displaybreite ein zweispaltiger Aufbau (50 % / 50 %) auf eine einzige Spalte umstellt: Die Container, die vorher jeweils die halbe Breite hatten, gehen dann auf 100 % – und was vorher nebeneinander stand, steht danach untereinander.

Media Queries sind Teil von CSS (Cascading Style Sheets). CSS ist die Sprache, die neben HTML und dem DOM zu den Kernsprachen des Web gehört und die gesamte Gestaltung übernimmt. Eingebunden wird sie in der Regel im Kopfbereich der Seite über eine externe Datei. Sie bestimmt beispielsweise, in welcher Schriftgröße, Farbe und Auszeichnung eine Überschrift erscheint.

Ganz einfach gesagt: Im HTML-Quelltext steht nur das Gerüst – Überschriften, Text, Boxen, Spalten. Wie dieses Gerüst am Ende aussieht und wie es sich an die jeweilige Bildschirmgröße anpasst, entscheidet das CSS.