Media Queries

Was sind Media Queries?

Bei Media Queries handelt es sich prinzipiell um Medienabfragen, zumindest was die Übersetzung in die deutsche Sprache angeht. Konkret sind Media Queries die Zuordnung eines CSS Stylesheets zu einem Ausgabemedium. Dadurch wird bestimmt, wie eine zugehörige HTML-Datei letzten Endes ausgegeben werden soll.

Durch unterschiedliche Merkmale als Notizen im CSS Stylesheet ist es möglich, die Ausgabe zu präzisieren – zum Beispiel für die Darstellung auf Smartphones, dem Desktop-PC oder auch auf Tablets und anderen Ausgabegeräten.

Allgemein stellen Media Queries einen wichtigen Bestandteil von CSS3 dar. Hiermit ist es für Programmierer:innen unter anderem möglich, responsive Webseiten zu gestalten. Die unterschiedliche Darstellung auf verschiedenen Bildschirmen kann auf diese Weise umgesetzt werden. Wichtig ist hierbei, dass der Inhalt an sich nicht verändert wird, lediglich auf die Art der Darstellung sowie Ausgabe wirken sich die Media Queries aus.

Technische Entwicklung als Hintergrund

Durch die technische Weiterentwicklung – insbesondere was die Entwicklung und Verbreitung von Smartphones und anderen mobilen Endgeräten angeht – haben sich die Formate für die Darstellung zum Teil deutlich geändert. Vor allem die kleineren Bildschirme von Tablets und Co. unterscheiden sich zu Computern und anderen Geräten.

Mithilfe von Media Queries werden die Medieninformationen von Webseiten vor dem Laden der Webseite abgefragt, damit alle Darstellungsformate optimal wiedergegeben werden können. Das basiert auf der Nutzung von CSS. Die Mediafeatures, Gerätetypen sowie auch sogenannte Breakpoints können dafür hinterlegt werden, damit auf dem Endgerät letztlich der richtige Teil der CSS Datei geladen wird. Die korrekte Darstellung der Inhalte wird hierdurch ermöglicht.

Media Queries unterstützen dabei eine Reihe an Funktionen und machen es unter anderem möglich, die Faktoren

  • width
  • height oder auch
  • color anzugeben.

Gibt es für einzelne Darstellungsformate keine konkreten Angaben, wird automatisch auf den Standardwert zurückgegriffen. Dies kann eine optimale Darstellung verhindern, sodass bei den Media Queries im besten Fall alle relevanten Angaben gemacht werden.