Responsive Webdesign – CSS3 Media Queries

Momentan scheinen Begriffe wie Responsive Design und mobile Optimierung Hochkonjunktur zu haben. Media Queries und CSS3 sind Worte, die in diesem Zusammenhang fallen. Grund genug, diese Dinge mal näher im Detail anzuschauen.




CSS3 Media Queries – die Medienabfrage

Medientypen im CSS2

Damit eine Website auf die Randbedingungen eines aufrufenden Endgerätes reagieren kann, müssen dessen Daten wie Bildschirmgröße, Auflösung und Format abgefragt werden können. Das Grundprinzip war bereits in CCS2 definiert. Dort konnten Die Ausgabemedien wie screen, print oder handheld konnten benutzt werden.

So konnte zum Beispiel jeweils eine unterschiedliche CSS Konfiguration für den Bildschirm und die Druckausgabe erstellt werden. Typischerweise wurden neben Formatierungen für den Ausdruck auch Navigationen im Ausdruck unterdrückt.

<link href=“screenstyle.css“ rel=“stylesheet“ media=“screen“>
<link href=“printstyle.css“ rel=“style:sheet“ media=“print“>

Jetzt wäre anzunehmen, dass mit dem Medientyp handheld ganz wunderbare die mobilen Geräte wie Smartphones zu bedienen. Aber genau dies machen die meisten Browser nicht

In CSS3 kommen die Media Queries dazu

Mit CSS3 kommen Medienabfragen wie die Breite des Fensters und Formate ( portrait, landscape ) hinzu, welche die Anpassungen noch exakter ausführen lassen können. Der gängigste Einsatz der media queries ist die Abfrage der Mindest- und Maximalbreiten und auch die Orientation von Viewports. Als Viewport ist die reale Größe des Browserfensters gemeint und nicht die des technischen Bildschirms.

Die grundlegende Syntax erlaubt neben den bekannten link-Elementen auch die @media-Anweisung innerhalb von Stylesheets.

Im folgenden Beispiel wird eine screen_responsive_mobile.css verwendet, wenn die Breite des Viewports maximal 1024 Pixel ist.

<link href=“css/screen_responsive_mobile.css“ rel=“stylesheet“ type=“text/css“ media=“(max-width: 1024px)“/>

Man kann die CSS Regeln aber auch direkt innerhalb geschweifter Klammern definieren:

@media screen and (max-width: 1024px) {/*Regeln von screen_responsive_mobile*/ }

Man kann die Bedingungen auch kombinieren. Im folgenden Beispiel werden die Regeln nur ausgeführt, wenn das Browserfenster zwischen 640 und 1024 Pixeln liegt.

@media screen and (min-width: 640px) and (max-width: 1024px) {/*Regeln von screen_responsive_mobile*/ }

Abfragemöglichkeiten mit Media Queries

Einige Möglichkeiten wurden bereits erwähnt. Die gesamte Auflistung aller möglichen Abfragen würde den Rahmen des Artikels sprengen. Eine Gesamtübersicht aller Media Queries findet man auf cssmediaqueries.com/overview.html .Dort kann man sich auch gleich im eigenen Browserfenster die Ergebnisse der media queries anschauen. Verändern sie einfach mal die Fenstergröße und Formate und beobachten die Resultate. Da einige ältere Browser noch nicht alle Abfragemöglichkeiten verstehen können sie auch gleich schauen, ob ihr benutzter Browser damit umgehen kann.

Noch ein wichtiger Tipp für das einwandfreie Funktionieren auf allen Smartphones. Damit die Media Queries auf allen Typen problemlos funktionieren und automatische Voreinstellungen ignoriert werden, sollte immer folgende Anweisung verwendet werden:

<meta name=“viewport“ content=“width=device-width“>

Mit dieser Anweisung werden Viewport und Bildschirmbreite identisch gesetzt. In HTML5 ist dies bereits im Bone enthalten.

Soweit zur Einweisung in das Grundverständnis der mit Einführung von CSS3 verfügbaren Medienabfragen. Die Media Queries sind nicht sehr komplex, aber die richtige Syntax und besonders das umfangreiche Testen aller Varianten sind für den Webentwickler wichtige Punkte.




Media Queries und CSS3

Foto: ©phecsone – Fotolia.com


Einen Kommentar schreiben

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

Kommentarlinks könnten nofollow frei sein.