Webdesign, das auf allen Geräten gleich gut funktioniert und aussieht, wird mit zunehmender Nutzung von unterschiedlichen Ausgabegeräten immer wichtiger. Technische Lösungen wie Media Queries sorgen dafür, dass mittels einfacher Abfragen das Layout stets an das Endgerät angepasst wird.
In diesem Artikel erfahren Sie, welche Rolle Media Queries im CSS einnehmen, wie sie funktionieren und welche Eigenschaften sie abfragen.
![→ Leitfaden zur Gestaltung einer barrierefreien Website [Kostenloser Download]](https://no-cache.hubspot.com/cta/default/53/260c7645-6f46-40ea-bccd-86df0e085131.png)
Was sind Media Queries?
Media Queries (deutsch: Medienabfragen) wurden mit CSS3 eingeführt und finden im responsive Webdesign Anwendung. Es handelt sich dabei um Stylesheet-Funktionen, die dafür sorgen, dass eine Webseite an Bildschirmgröße, Auflösung und andere Merkmale von Endgeräten angepasst wird. Definiert wird die Abfrage innerhalb der @media-Regel.
Wie funktionieren Media Queries?
Im responsive Webdesign geht es darum, Usern und Userinnen die bestmögliche Nutzungserfahrung mit einer Website oder Anwendung zu gewährleisten – unabhängig vom Endgerät. Mithilfe von Media Queries wird dazu eine Abfrage im CSS eingerichtet, die dem Browser die Möglichkeit bietet, die Eigenschaften (zum Beispiel Höhe, Breite, Auflösung) des jeweiligen Gerätes (zum Beispiel Laptop, Tablet, TV, Smartphone) zu laden.
Die Medienabfrage schafft somit den Vorteil, dass die Darstellung direkt an das Gerät angepasst werden kann. Besonders praktisch ist, dass die Medieninformationen nicht für jedes einzelne Gerät definiert werden müssen, stattdessen enthalten Media Queries verschiedene Medientypen. Die Medientypen wiederum werden mit ein oder mehreren Medienmerkmalen beschrieben.
Medientypen in CSS-Abfragen
Medientypen beschreiben innerhalb der CSS Media Queries das jeweilige Gerät, auf dem die Seite ausgegeben wird. Möglich sind die folgenden drei Werte:
- screen: beinhaltet alle Computerbildschirme
- print: eignet sich für alle Drucker und Browser mit Druckvorschau
- speech: für Sprach-Synthesizer, die Inhalte der Website vorlesen
Der Medientyp muss jedoch nicht definiert werden, sondern ist optional. Enthält eine Media Query keinen definierten Wert, so wird per Default „all“ eingesetzt. Dieser Standardwert bezeichnet alle Ausgabegeräte.
Seit den Media Queries Level 4 werden nur noch diese vier Werte verwendet. Zuvor existierten weitere Medientypen wie beispielsweise aural, handheld oder tv. Heute sind diese Geräteklassen jedoch veraltet und finden keine Anwendung mehr.
Warum Media Queries Breakpoints verwenden
Um das responsive Design einer Website für jede Viewport-Größe korrekt auszuspielen, werden im CSS Breakpoints (deutsch: Bruchstelle) eingesetzt. Die Breakpoints definieren sinnbildlich, an welchen Stellen das Design „gebrochen“ wird, um es an die Größe des Ausgabegerätes anzupassen. Im Webdesign wird aus diesem Grund empfohlen, zunächst das Design für das kleinste Gerät (Smartphones) zu entwerfen und diese dann mithilfe von Breakpoints an größere Bildschirme anzupassen.
Sobald keine harmonische Darstellung gewährleistet werden kann, tritt der in der @media-Regel definierte Breakpoint ein. Die Media Query überschreibt schließlich die Eigenschaften. Somit wird das Layout der Seite an die Viewport-Größe von der Smart-Watch bis zum Smart-TV angepasst. Festgelegt wird der Breakpoint durch den entsprechenden Pixelwert:
@media screen and (max-width:720px) {
}
Zusätzlich zum Breakpoint im CSS muss folgendes Viewport Meta-Tag ins HTML-Doc integriert werden, damit die Anweisung korrekt funktioniert:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS Media Queries: Diese Medienmerkmale gibt es
Die Merkmale der Media Queries fragen spezifische Eigenschaften des Gerätes ab. Dabei kann es sich sowohl um die Größe als auch um Farbeigenschaften handeln. Die nachfolgende Tabelle gibt Ihnen eine Übersicht der wichtigsten Media Queries Medienmerkmale:
| Merkmal | Beschreibung | Beispiel |
| width | Gibt die Breite des Gerätes an. | @media (min-width: 60em) {
} |
| heigth | Gibt die Höhe des Gerätes an. | @media (heights >=25em) {
} |
| aspect-ratio | Beschreibt das Seitenverhältnis von Breite zu Höhe des Gerätes. | @media (aspect-ratio: 4/3) {
} |
| color | Gibt die Anzahl der Bits an, die das Gerät pro Farbkomponente verwendet. | @media (color < 2) {
} |
| color-index | Gibt den Farbindex, also die Anzahl der Farben an, die das Gerät ausspielen kann. | @media (min-color-index: 40) {
} |
| orientation | Beschreibt das Seitenformat des Gerätes. Möglich sind die Werte portrait (Hochformat) und landscape (Querformat). | @media (orientation: landscape) {
} |
| monochrome | Gibt an, wie viele Bits für den schwarz-weiß-Farbton genutzt werden. | @media (monochrome: 8) {
} |
| color-gamut | Gibt den Farbbereich an, den das Gerät ausspielen kann. CSS kennt die Farbräume srgb, rec2020 und p3. | @media (monochrome: 4) {
} |
| pointer | Gibt an, welcher Zeiger typischerweise bei einem Gerät verwendet wird. Mögliche Werte sind:
|
@media (pointer: coarse) {
} |
| resolution | Gibt die Auflösung des Gerätes an. | @media (min-resolution: 72dpi) {
} |
| grid | Gibt die Rastereigenschaft des Gerätes an. Möglich sind die Werte 1 (für wahr) und 0 (für unwahr). | @media (grid: 1) {
} |
Beispiel für die Verwendung von Media Queries
Mit der stetigen Zunahme von digitalen Geräten gehören Media Queries zum Standardrepertoire des responsive Webdesign. Vor allem die Ausbreitung mobiler Smartphones und die wachsende Nutzung spielen bei der Definition von Medienabfragen eine große Rolle. Selbstverständlich können Sie sich die Mühe machen und Ihre Website an jedes einzelne Gerät anpassen – jedoch ist dies in der Regel nicht notwendig.
Stattdessen können Sie auf die folgenden Standard Media Queries für mobile Smartphones zurückgreifen:
/* Smartphones Hochformat */
@media only screen
and (min-width: 320px)
and (max-width: 479px) {
}
/* Smartphone Querformat */
@media only screen
and (min-width: 480px)
and (max-width: 767px) {
}
Fazit: Schaffen Sie ein einzigartiges Nutzungserlebnis – und zwar geräteübergreifend
Media Queries ermöglichen im responsive Webdesign Medienmerkmale des genutzten Gerätes abzufragen, um das Layout der Website an die Spezifikationen anzupassen. Neben der Breite und Höhe können auch Farbräume sowie die Auflösung bestimmt werden. Media-Abfragen sind deshalb unabdingbar, wenn Sie Ihren Webseitenbesuchenden ein eindrucksvolles Nutzungserlebnis bieten möchten.
Titelbild: Luis Alvarez / iStock / Getty Images Plus
