CSS3 Media Queries machen es möglich, dass sich ein Webdesign automatisch an unterschiedliche Bildschirmformate anpasst. Für ein solches Webdesign hat sich der Begriff “Responsive Webdesign” (also ansprechendes, auf etwas reagierendes Design) durchgesetzt. Man legt dazu einfach die maximalen bzw. minimalen Maße eines Bildschirmformates (z.B. des iPads) fest, und kann dann für dieses Format eigene CSS-Styles bestimmen. In der Theorie klingt das eigentlich recht einfach, und auch die Einbindung der Media Queries ist nicht sehr kompliziert. Allerdings gibt es bei der Arbeit mit CSS3 Media Queries einiges zu bedenken, wie ja auch schon im Artikel “Was können CSS3 Media Queries wirklich leisten?” besprochen wurde.
Hast du dich für die Umsetzung eines Webseiten-Projekts mit CSS3 Media Queries entschieden, und auch schon entsprechende Layout (z.B. für eine große Desktop-Version, eine schmalere Tablet-Variante und eine kleine Smartphone-Version) deines Designs vorbereitet, kannst du mit der Umsetzung loslegen.

1. Die Vorgehensweise

Als erstes musst du dir überlegen, welche Webseiten-Größe deine Standard-Version werden soll. Dazu kannst du entweder die größte Version, also die Desktop-Ansicht wählen oder, falls du dein Webseiten-Projekt vor allem für mobile Geräte umsetzt, die mobile Smartphone-Version. Du kannst also entweder vom Großen ins Kleine oder andersrum arbeiten.

Wenn du dich für die mobile Webseiten-Version als Standard entscheidest, solltest du dir unbedingt die Tipps und Infos auf der Webseite von Luke W. anschauen. Die Seite von Luke W. Ist übrigens selbst ein Beispiel für eine solche “Mobile First”-Vorgehensweise.

Deine Standard-Version (egal ob Mobile oder Desktop) setzt du jetzt wie gewohnt mit CSS in einem Haupt-Stylesheet um. Im nächsten Schritt fügt du dann deine Media Queries ein, um die weiteren Bildschirmformate anzusprechen und mit CSS entsprechend um zu stylen.

2. CSS3 Media Queries einbinden

Es gibt zwei Möglichkeiten, die Media Queries aufzurufen. Entweder du fügst sie direkt in dein Haupt-Stylesheet ein. Dazu kannst du die @media only screen { } nutzen. Hier ein Beispiel:

[php]
/* iPads (landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {

}
[/php]

Innerhalb der geschwungenen Klammern fügst du dann deine benötigten Styles ein.

Alternativ kannst du auch jeweils ein extra Stylesheet für jede Layout-Version anlegen, und diese innerhalb des head-Tags mit einem link-Tag aufrufen. Für die iPad-Version im Querformat benötigst du also also den Code:

[php]
<link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">
[/php]

Eine sehr hilfreiche Übersicht über die benötigten Formate findest du in der CSS3 Media Queries Vorlage “Hardboiled CSS3 Media Queries” von Andy Clarke. Hier kannst du dir verschiedene Formate genau anschauen, und den für dein Layout benötigten Code kopieren.

3. Der Viewport Meta-Tag

Neben der Integration der Media Queries ist außerdem wichtig, dass du den Viewport meta-Tag innerhalb deines head-Tags aufrufst.

[php]
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
[/php]

Mit diesem Code kannst du unterbinden, dass deine Webseite im iPhone automatisch auf eine passende Größe kleiner gezoomt wird.

4. Tipps für flexibles CSS-Stying

Im Gegensatz zur Umsetzung eines Webdesigns mit fester Breite, ist es beim Gestalten von flexiblen Layout sinnvoller mit Prozentzahlen zu arbeiten. So kannst deine Div-Container und font-size Angaben beispielsweise in Prozent angeben, und auch bei der Arbeit mit Images ist die Angabe von max-width:100%; sinnvoll.
Diese CSS-Angabe wird allerdings nicht vom Internet Explorer 9 unterstützt, einen ausführlichen Artikel zu dieser Problematik schreibt auch Ethan Marcotte in seinem Artikel über Fluid Images.

Sehr wichtig ist meiner Meinung nach bei der Umsetzung eines Designs mit CSS3 Media Queries, dass man die Layouts in den Grundzügen im CSS anlegt und dann das Design immer wieder in verschiedenen Browsern und auf den unterschiedlichen Geräten testet. Nur so bekommst du ein Gefühl für die passenden Schriftgrößen und Maße.

Tipps zum Weiterlesen

Die folgenden Blog-Artikel, Code-Beispiele und Tools bieten eine hilfreiche Grundlage, um mit der Umsetzung einer mit CSS Media Queries optimierten Webseite loszulegen.

Hast du bereits eigene Erfahrungen mit den CSS3 Media Queries machen können? Auf was sollte man deiner Meinung nach bei der Umsetzung eines Responsive Layouts besonders achten, und kennst du weitere informative Artikel oder Tools zum Thema? Über dein Feedback und deine Tipps freue ich mich sehr!