Media Queries

Media Queries sind eine Funktion von CSS, mit der sich der Inhalt einer Webseite an verschiedene Bildschirmgrößen und Auflösungen anpassen lässt. Sie sind ein grundlegender Bestandteil des responsiven Webdesigns und werden verwendet, um das Erscheinungsbild von Webseiten für mehrere Geräte anzupassen.

Media Queries können innerhalb des HTML-Codes einer Webseite eingefügt oder in einer separaten .CSS-Datei enthalten sein, auf die die Webseite verweist. Unten sehen Sie ein Beispiel für eine einfache Media Query:

@media screen and (max-width: 768px)
{
  header { height: 70px; }
  article { font-size: 14px; }
  img { max-width: 480px; }
}

Die obige Media Query wird aktiviert, wenn das Fenster des Browsers eines Benutzers 768 Pixel breit oder weniger ist. Das kann passieren, wenn Sie das Fenster auf einem Desktopcomputer verkleinern oder wenn Sie ein Mobilgerät, beispielsweise ein Tablet, verwenden, um die Webseite anzuzeigen.

Beim responsiven Webdesign fungieren Media Queries als Filter für verschiedene Bildschirmgrößen. Wie bei allen Modulen innerhalb eines Cascading Style Sheets überschreiben die weiter unten in der Liste stehenden Module die darüber stehenden. Daher werden die Standardstile in der Regel zuerst in einem CSS-Dokument definiert, gefolgt von den Media Queries für verschiedene Bildschirmgrößen. Beispielsweise können zuerst die Desktopstile definiert werden, gefolgt von einer Media Query mit Stilen für Tabletbenutzer und anschließend von einer Media Query für Smartphone-Benutzer. Stile können auch in umgekehrter Reihenfolge definiert werden. Diese Vorgehensweise wird als Entwicklung nach dem Prinzip „Mobile First“ bezeichnet.

min-width ist zwar mit Abstand die am häufigsten verwendete Funktion in Media Queries, es stehen jedoch auch viele andere zur Verfügung. Beispiele sind min-device-width, min-device-height, aspect-ratio, max-color-index, max-resolution, orientation und resolution. Der Wert resolution kann beispielsweise verwendet werden, um HiDPI-Bildschirme zu erkennen, etwa Retina-Displays, und Grafiken mit hoher Auflösung anstelle von Standardbildern zu laden.