Media Queries

Media Queries (Medienabfragen) sind eine wichtige Funktion von CSS und werden dazu benutzt, die Darstellung einer Webseite in verschiedene Ausgabemedien anzupassen. Dabei wird durch eine Medienabfrage festgestellt, welches Medium zum Darstellen der Seite benutzt wird und dementsprechend der entsprechene CSS-Style geladen.

Media Queries können folgende Bestandteile haben: Medientyp und Medienmerkmal. Eine Auflistung verschiedenen Ausprägungen findet sich weiter unten.

Um Media Queries zu benutzen, gibt es mehrere Möglichkeiten. Zum einen kann man für die einzelnen Ausgabemöglichkeiten jeweils ein eigenes Stylesheet einbinden:

<head>
    <link rel="stylesheet" href="screen-style.css" media="screen">
    <link rel="stylesheet" href="print-style.css" media="print">
</head>

Allerdings wird davon aus Gründen der Performance abgeraten, da sich dadurch im schlimmsten Fall die Zugriffszeiten deutlich erhöhen können. Die bessere Wahl ist deswegen die Queries direkt in der CSS-Datei zu benutzen:

@media (min-width: 1024px) and (max-width: 1920px) { /* CSS-Regeln */ }

Media Queries werden häufig dafür verwendet, um auf verschiedene Breiten der Ausgabebildschirme reagieren zu können, d.h. im Sinne des responsive Designs auf Desktop-PCs, Laptops, Smartphones und Tablets etc. zu reagieren. Damit die Webseite sowohl in einem schmalen Browserfenster eines Laptops oder PCs als auch auf dem Smartphone oder Tablet wie gewünscht dargestellt wird, muss im <head>-Element der Seite zunächst der Viewport (Anzeigebereich, der für die Darstellung des Inhaltes tatsächlich zur Verfügung steht) angepasst werden:

<meta name="viewport" content="width=device-width, initial-scale=1.0"

Folgende Medientypen und Medienmerkmale stehen zur Zeit zur Verfügung:

Medientyp Beschreibung
all Standardwert – alle Ausgabemedien
printDrucker
screenBildschirme
speechSprachausgabe
Medienmerkmal Beschreibung
widthBreite
heightHöhe
device-width Breite des Geräts
device-height Höhe des Geräts
device-pixel-ratioGeräte-Pixel-Verhältnis
orientationSeitenformat eines Ausgabemediums
landscape: Querformat
portrait: Hochformat
aspect-ratioSeitenverhältnis von width zu height
device-aspect-ratioSeitenverhältnis des Geräts
colorAnzahl der Bits, die ein Gerät pro Farbkomponente verwendet
color-indexAnzahl der Farbdefinitionen in der Farbtabelle des Ausgabemediums
monochromeAnzahl der Bits zur Beschreibung eines schwarz-weiß-Farbtons
light-levelLichtverhältnisse der Umgebung (erfasst durch den Helligkeitssensor der Kamera)
dim: gedämpftes Licht
normal: normale Lichtverhältnisse
washed: sehr hell, in Licht gebadet
pointerGenauigkeit des Gerätezeigers für die Eingabe
fine: für Geräte mit Maus, Touchpad oder Eingabestift
coarse: für Geräte mit Touch- oder Gestensteuerung
none: nur Tastatureingabe möglich
resolutionAuflösung eines Ausgabemedium
scanBildaufbau von Ausgabegeräten des Medientyps „tv“
gridRastereigenschaft von Ausgabemedien