Media Queries: schon mal gehört? Ich lasse mal direkt Wikipedia erklären:

Bei Media Queries handelt es sich um ein Konzept, welches mit CSS3 eingeführt wurde und das Prinzip des Medientyps in CSS2 erweitert. Anstatt starr zu definieren, welches Medium das Zielmedium ist, können mit Media Queries die Eigenschaften des aktuellen Gerätes direkt abgefragt werden. Verfügbare Geräteeigenschaften sind zum Beispiel:

  • Breite und Höhe des Browserfensters
  • Breite und Höhe des Gerätes
  • Orientierung (Quer- oder Hochformat)
  • Bildschirmauflösung

Vor allem im Bereich der mobilen Webprogrammierung werden Media Queries bereits jetzt häufig eingesetzt, um die Webseite ideal an das aktuell verwendete Gerät anzupassen.

Da Bilder bekanntlich mehr sagen als tausend Worte, schaut euch folgendes Bild an (kommt euch bekannt vor, oder?):

Man spricht bei der Anpassung für mobile Endgeräte auch vom responsiven Layout. In diesem Artikel will ich eine kurze Einführung in das Thema geben und anhand einiger Beispiele die Optimierung einer Webseite für mobile Endgeräte zeigen.

Springen wir einfach mal ins kalte Wasser und beginnen mit einem einfachem Beispiel. Für eine Webseite legen wir die Standard-Schriftgröße wie folgt fest:

body {
font-size: 14px;
}

Wer sich auf einem Smartphone mit kleinem Display eine Webseite mit einer Schriftgröße von 14 Pixeln betrachtet, wird mir sicher zustimmen, dass das verdammt klein ist. Um für ein Gerät mit einer Breite von bis zu 640 Pixeln die Schriftgröße auf 18 Pixel mittels Media Queries zu erhöhen, ergänzen wir im Stylesheet

@media screen and (max-width: 640px) {
body {
font-size: 18px;
}
}

Das war nicht schwer, oder? Mit Media Queries habt ihr unzählige Möglichkeiten eine Webseite für kleine Auflösungen anzupassen. Nahezu jedes Element kann abweichend dargestellt werden. Hab ich euer Interesse geweckt?

Für die praktische Umsetzung habe ich ein paar Beispiele zusammengestellt:

Sidebar unter den Inhaltsbereich verschieben

Nehmen wir an, wir haben auf unserer Webseite einen Inhaltsbereich und rechts daneben eine Sidebar definiert, etwa so:

#inhalt {
float: left;
width: 75%;
}

#sidebar {
float: right;
width: 25%;
}

Der Inhaltsbereich soll nun für kleinere Displays über die gesamte Breite der Seite angezeigt und die Sidebar unterhalb des Inhaltsbereichs positioniert werden:

@media screen and (max-width: 640px) {
#inhalt {
float: none;
width: 100%;
}

#sidebar {
float: none;
width: 100%;
}
}

Bereich ausblenden

Bereiche oder Elemente können auch komplett ausgeblendet werden. Nehmen wir nochmal das obige Beispiel mit der Sidebar. Um diese auszublenden statt zu verschieben, fügen wir hinzu:

@media screen and (max-width: 640px) {
#inhalt {
float: none;
width: 100%;
}

#sidebar {
display: none;
}
}

Text zentriert ausgerichtet

Wollen wir einen Text anstatt linksbündig zentriert ausrichten, machen wir das wie folgt:

gewöhnliche Deklaration

.text {
text-align: left;
}

abweiche Deklaration

@media screen and (max-width: 640px) {
.text {
text-align: center;
}
}

Navigation vertikal statt horizontal

Angenommen unser Theme besitzt eine horizontale Navigation, dann haben wir die Listenelemente gefloatet:

#navigation li {
float: left;
}

Wollen wir eine vertikale Navigation erreichen, also die Listenelemente untereinander anordnen, so ergänzen wir:

@media screen and (max-width: 640px) {
#navigation li {
float: none;
}
}

In Bildern bitte

Um die möglichen Veränderungen durch Media Queries zu verdeutlichen, habe ich nachfolgend drei Screenshots meines nächsten WordPress-Themes ‚ACHT‘ (kommt bald) zusammengestellt.

Hier die ’normale‘ Ansicht ab einer Breite von 1024 Pixeln:

für Geräte mit einer Auflösung von bis zu 800 Pixeln wird die Sidebar nach unten verschoben, die Navigation inklusive Suche umgestellt, sowie das Logo zentriert:

und für Geräte mit einer Auflösung von weniger als 640 Pixeln werden die Top-Artikel ausgeblendet, die Schriftgröße erhöht und die Social Icons sowie Bloginfo zentriert:

Hochformat, Querformat oder Seitenverhältnis?

Media Queries können aber noch weitaus mehr, als nur auf Höhe oder Breite eines Gerätes reagieren. So kann beispielsweise auch das Seitenverhältnis (aspect-ratio) oder die Ausrichtung (orientation) eines Gerätes ausgewertet werden.

In folgendem Beispiel variiert die Hintergrundfarbe, je nachdem wie das Gerät gehalten wird:

@media screen and (orientation: portrait) {
body { background-color: white; }
}

@media screen and (orientation: landscape) {
body { background-color: black; }
}

Aber auch das ist noch lange nicht alles. Es gibt noch viele weitere Merkmale, die angewendet werden können. Wer sich intensiver mit dem Thema beschäftigen möchte, bekommt hier einen sehr guten Artikel zu dem Thema.

Was passiert mit Bildern?

Nix! Sollen Bilder automatisch an Höhe und Breite der Webseite angepasst werden, könnt ihr im Stylesheet (nicht bei den Media Queries) folgendes ergänzen:

img {
max-width: 100%;
height: auto;
}

Beachtet, dass dies für sämtliche Bilder gilt, die als img eingebunden werden. Dies hat zwar nichts mit Media Queries zu tun, aber wenn wir das nicht definieren, würden die Bilder in ihrer ursprünglichen Größe angezeigt werden, auch wenn Media Queries aktiv sind. Breite Bilder würden dann nur zum Teil sichtbar sein. Unschön, oder?

In die Webseite einbinden

Um Media Queries in die eigene Webseite zu integrieren, habt ihr zwei Möglichkeiten: entweder legt ihr unabhängig von eurem bestehenden Stylesheet weitere an oder ihr ergänzt euer bestehendes Stylesheet um Media Queries.

Weitere Stylesheets anlegen

Je nachdem für welche Geräte, Auflösungen oder wie auch immer ihr die Webseite anpassen möchtet, legt ihr ein oder mehrere Stylesheets an und bindet diese, wie euer Hauptstylesheet, in den Kopfbereich (head) eures Themes ein:

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="medium.css" media="all and (max-width: 800px)" />
<link rel="stylesheet" type="text/css" href="small.css" media="all and (max-width: 640px)" />

In diesem Beispiel fügen wir neben dem bereits bestehenden Stylesheet zwei weitere, für Geräte mit einer Auflösung von bis zu 640 bzw. 800 Pixeln in der Breite, ein.

Es gibt noch eine weitere Möglichkeit Stylesheets einzubinden und zwar per @import-Deklaration im bestehenden Stylesheet. Wer dies favorisiert ergänzt folgendes in das Hauptstylesheet:

@import url("medium.css") all and (max-device-width: 800px);
@import url("small.css") all and (max-device-width: 640px);

Hauptstylesheet um Media Queries ergänzen

Dies hat den Vorteil, dass ihr lediglich euer Stylesheet ändern müsst. Ihr fügt dazu am Ende nach den gewöhnlichen Deklarationen folgenden Aufruf hinzu:

@media all and (max-width: 800px) {
}

@media all and (max-width: 640px) {
}
}

und definiert jeweils innerhalb der Klammern eure abweichenden Style-Deklarationen.

Das Stylesheet sollte dann den folgenden Aufbau haben:

html {
blablub
}

#header {
blablablub
}

// und die weiteren Deklarationen
...
// am Ende dann die Media Queries hinzufügen

@media all and (max-width: 800px) {
html {
blubbla
}
}

@media all and (max-width: 640px) {
#header {
blablubbla
}
}

Für welche Lösung ihr euch auch entscheidet bleibt euch überlassen; beide Wege führen zum selben Ergebnis. Ich persönlich nutze die zweite Möglichkeit, da es weniger Aufwand erfordert und ich der Meinung bin, je weniger Dateien verwendet werden, desto besser.

Ich will gucken

Wenn ihr Media Queries live in Aktion sehen wollt, könnt ihr dies mit meiner Webseite ausprobieren. Dazu könnt ihr euer Handy stecken lassen und das mit eurem Browser auf dem PC nachstellen. Schiebt das Browserfenster soweit zusammen, dass ihr eine Auflösung von maximal 1024 Pixeln in der Breite erreicht. Euer (hoffentlich) aktueller Browser wird dann automatisch die Sidebar ausblenden und noch einige andere Anpassungen vornehmen, wie ihr auf dem Bild oben sehen könnt.

Browserkompatibilität

Aprospos Browser: Alle aktuellen Browser, auch der Internet Explorer 9, unterstützen Media Queries. Was aber für uns, die wir unsere Webseite mobil machen wollen, wichtiger ist, wie sieht es mit der Unterstützung mobiler Browser aus? Auch da gibt es Entwarnung. Alle wichtigen mobilen Varianten können Media Queries verarbeiten. Hier gibt’s eine Auflistung.

So das soll als Einleitung in das Thema genügen. Viel Spass mit der mobilen Ausgabe eurer Webseite.