Media Queries in CSS

Media Queries sind in der heutigen Zeit eine der wichtigsten Befehlsarten die uns im Web zur Verfügung stehen. Moderne Buzzwörter wie Responsive und Mobile first machen erst dank ihnen Sinn und geben uns Webentwicklern neue Freiheiten. Beispielsweise die Freiheit, unseren Content nur einmal auszugeben und dafür zu sorgen, dass er auf verschiedenen Ausgabegeräten gut aussieht. Die einfachsten Beispiele für Ausgabegeräte sind sowohl der große Computerbildschirm als auch der kleine Handyscreen, aber auch beispielsweise auf dem Drucker.
Wie wir diese Media Queries nun auf unserer Website zum Einsatz bringen sehen wir uns in diesem Artikel Schritt für Schritt an.

Was sind Media Queries?

Media Queries geben uns die Möglichkeit, Bedingungen in CSS festzulegen, wie wir das auch aus PHP kennen. Nur unter diesen Bedingungen würden bestimmte CSS Befehle angewendet werden. Ein simples Beispiel dafür wäre:

Falls meine Ausgabefläche maximal 480 Pixel breit ist, setze diesen div Container auf eine Breite von 100%.

Eine Media Query, die diese Bedingung umsetzt, erlaubt uns zum Beispiel auf einem Mobilgerät – wie dem iPhone – einen div Container über die volle Breite anzuzeigen. Wichtig hierbei ist, dass diese Bedingung sich ausschließlich auf die Ausgabefläche bezieht, also den sogenannten Viewport. Im Browser ist das der sichtbare Bereich, den eine Website einnimmt (abzüglich der Menüleisten oben / unten beispielsweise). Verändere ich also die Größe meines Browsers – indem ich das Fenster kleiner ziehe – werden auch hier die Media Queries angewendet.

Media Queries entwickeln ihre volle Stärke natürlich erst dann, wenn man sie kombiniert. Der Begriff responsive bedeutet also nichts anderes als die Anpassung unseres Designs an das darstellende Ausgabegerät. Das könnte dann beispielsweise so aussehen:

Dieser div Container soll eine Breite von 33% haben.

Falls der Ausgabebereich unter 981 Pixel breit ist (zum Beispiel bei einem Tablet) soll dieser div Container nun 50% breit sein.

Falls der Ausgabebereich unter 760 Pixel breit ist (zum Beispiel am Smartphone) soll dieser div Container sogar 100% breit sein.

Durch diese Kombination könnte sich zum Beispiel ein dreispaltiges Layout auf einem kleineren Gerät (wie beispielsweise einem iPad) automatisch in ein zweispaltiges Layout und auf einem Smartphone sogar in ein einspaltiges Layout verwandeln. Wer schonmal ein dreispaltiges Layout auf einem Smartphone gesehen hat weiß das sicherlich zu schätzen. 🙂

Die Media Queries funktionieren deshalb weil das CSS erst am Ende auf unser Design angewendet wird – also wenn unser HTML Gerüst vom Browser in einen DOM Baum umgewandelt wurde. Das hat natürlich für uns den Vorteil, dass wir dasselbe HTML (im besten Fall) für alle Ausgabegeräte wiederverwenden können und Änderungen am Design (im besten Fall) ausschließlich über CSS gesteuert werden.

 

Wie schreiben wir eine Media Query?

Media Queries bestehen aus einem Medientyp (beispielsweise Bildschirm oder Druck) und Medienmerkmalen (zum Beispiel die Breite oder Höhe des Ausgabebereichs). Grundsätzlich können wir Media Queries sowohl über das <link> Tag steuern als auch direkt in die CSS Datei schreiben. Dabei ist die zweite Variante allerdings deshalb zu bevorzugen weil CSS Dateien aus Performance Gründen meist in eine einzige Datei zusammengefasst werden. Bei der ersten Variante müsste man diese aber in verschiedenen Dateien verlinken, was die Anzahl der Requests und damit auch die Ladezeit der Seite erhöht.
In diesem Artikel beschränken wir uns aus diesem Grund auf die Definition von Media Queries innerhalb der CSS Datei.

 

 

Mit dem Schlüsselwort @media leiten wir im CSS Media Queries ein. Der Browser erkennt dies und wird den darauf folgenden Codeblock nur dann anwenden, wenn alle Bedingungen der Query auch wirklich erfüllt sind. Fangen wir mit einem einfachen Beispiel und nur einem Medientyp an:

Findet unser Browser diese Media Query wird er überprüfen, ob er sich im Print Modus befindet (es werden also spezielle Styles für Drucker angewendet). Im Beispiel sorgen wir einfach dafür, dass das <body> Tag einen weißen Hintergrund und schwarze Schrift erhält. Falls kein Print Modus aktiviert ist wird der komplette Codeblock schlichtweg ignoriert.

Das ist schon ein guter Anfang. Noch besser wird es natürlich, wenn wir mehrere Bedingungen in einer Query kombinieren können. Sehen wir uns auch dazu ein Beispiel an:

In diesem kleinen Beispiel kombinieren wir zwei Bedingungen (einmal screen, welches nur ausgeführt wird, wenn wir das Ergebnis auf einem Bildschirm betrachten und min-width, das den Ausgabebereich auf eine bestimmte Mindestbreite abklopft). Nur wenn beide Bedingungen erfüllt werden (wir also einen Bildschirm und eine Ausgabefläche von mindestens 1000 Pixel Breite haben) werden alle Elemente mit der Klasse grid-3rd auf 33% Breite gesetzt.

 

 

Media Queries logisch verknüpfen

Im vorherigen Abschnitt haben wir bereits den and Operator gesehen, der zwei Bedingungen mit einer logischen UND Verknüpfung verbindet. Die Bedingung wird also nur dann eingebunden, wenn beide Bedingungen erfüllt sind. Neben dieser gibt es natürlich noch mehr Varianten, die und eine möglichst genaue Anpassung der Bedingungen an unsere speziellen Bedürfnisse ermöglichen.

Logische ODER Verknüpfung

Neben dem and – welches ein logisches UND darstellt – gibt es natürlich auch eine logische ODER Verknüpfung bei den Media Queries. Genau wie bei normalen CSS Selektoren wird diese mit einem Komma angegeben und die Anweisungen werden ausgeführt sobald eine der Bedingungen erfüllt ist.

Diese Beispielabfrage überprüft ob wir uns auf einem Bildschirm befinden und ob entweder die Mindestbreite 500 Pixel oder die Maximalbreite 700 Pixel ist.

only

Das Schlüsselwort only versteckt Anweisungen vor älteren Browsern, die bestimmte Medienmerkmale nicht verstehen – beispielsweise Farben. Versteht der Browser das Merkmal wird das Schlüsselwort einfach ignoriert.

 

not

Mit dem Schlüsselwort not haben wir nun noch die Möglichkeit, eine Negierung herzustellen – also dafür zu sorgen, dass Anweisungen nur für Geräte ausgeführt werden, die bestimmte Bedingungen NICHT erfüllen.

Dieses Beispiel führt die Anwendungen auf allen Geräten aus, die kein Bildschirm sind (zum Beispiel Drucker).

 

 

Die wichtigsten Breakpoints

Ein Breakpoint ist eine Breite, bei der sich das Design verändern soll – beispielsweise aus einem dreispaltigen Design wird bei kleineren Geräten nur noch ein zweispaltiges. Genau diese Funktion erreichen wir mit den Media Queries.
Doch um diese Breakpoints effektiv einsetzen zu können müssen wir die gängigen Breakpoints für die wichtigsten Geräte kennen. Eine gute Auflistung (inklusive der passenden Media Queries) finden wir beispielsweise bei responsivedesign.is.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*