Media Queries: Medienabfragen für responsives Webdesign

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.

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:

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