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 |
| Drucker | |
| screen | Bildschirme |
| speech | Sprachausgabe |
| Medienmerkmal | Beschreibung |
|---|---|
| width | Breite |
| height | Höhe |
| device-width | Breite des Geräts |
| device-height | Höhe des Geräts |
| device-pixel-ratio | Geräte-Pixel-Verhältnis |
| orientation | Seitenformat eines Ausgabemediums
landscape: Querformat portrait: Hochformat |
| aspect-ratio | Seitenverhältnis von width zu height |
| device-aspect-ratio | Seitenverhältnis des Geräts |
| color | Anzahl der Bits, die ein Gerät pro Farbkomponente verwendet |
| color-index | Anzahl der Farbdefinitionen in der Farbtabelle des Ausgabemediums |
| monochrome | Anzahl der Bits zur Beschreibung eines schwarz-weiß-Farbtons |
| light-level | Lichtverhältnisse der Umgebung (erfasst durch den Helligkeitssensor der Kamera)
dim: gedämpftes Licht normal: normale Lichtverhältnisse washed: sehr hell, in Licht gebadet |
| pointer | Genauigkeit 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 |
| resolution | Auflösung eines Ausgabemedium |
| scan | Bildaufbau von Ausgabegeräten des Medientyps "tv" |
| grid | Rastereigenschaft von Ausgabemedien |