Spätestens seit dem Siegeszug des iPhones wurde die Frage nach einem optimierten Website-Design für verschiedene Geräte und Displaygrössen immer wichtiger. Grosse Seiten wie Facebook oder Twitter haben schon länger eigens für Smartphones angepasste Subdomains (meistens über mobile.domain.com oder m.domain.com aufrufbar).
Wer sich also mit Webdesign auseinander setzt wird früher oder später mit diesem Thema konfrontiert werden.
Auch ich habe letzte Woche einige Artikel und Anleitungen über dieses Thema gelesen und auch selber gleich ein wenig herumprobiert. Speziell möchte ich hier auf einen Artikel auf kulturbanause.de verweisen, welcher wirklich sehr einfach und verständlich auf dieses Thema eingeht.
Es gibt verschiedene Lösungsvarianten für diese Aufgabe, ich werde mich in diesem Artikel auf CSS Media Queries beschränken.
CSS Media Queries bisher
Bereits in CSS 2.0 (vielleicht sogar schon in CSS 1.0) gab es sie, die Media Queries. Mit deren Hilfe konnte man verschiedene CSS Files für verschiedene Medientypen angeben. So kann man z.B. ein spezielles CSS File schreiben welches für die Druckansicht gilt und unnötige Elemente wie Werbung, Hintergrundbilder oder die Navigation ausblendet.
Verwendung des media attributs im HTML Header
<link href="style.css" media="screen" rel="stylesheet" type="text/css"></link>
<link href="print.css" media="print" rel="stylesheet" type="text/css"></link>
Verwendung des media attributs im CSS Code
body { background-color: #000; }
@media print {
body { background-color: none; } /* überschreibt die obere Regel falls die Seite im Medium "print" angeschaut wird */
}
Gültige Media-Typen gemäss w3c
Media Queries in CSS 3.0
In CSS 3.0 wurden die Funktionen dieser Media Queries erweitert. So ist es nun auch möglich detailliertere Infos zum Gerät zu erhalten, sowie verschachtelte Abfragen zu erstellen.
Die hilfreichsten Angaben sind folgende:
- width
Viewport-Breite (z.B.: Der zur Verfügung stehende Platz innerhalb des Browserfensters)
Beispiel: @media handheld and (min-width: 20em) { ... }
- height
Viewport-Höhe (z.B.: Der zur Verfügung stehende Platz innerhalb des Browserfensters)
Beispiel: @media screen and (max-height: 700px) { … }
- device-width
Breite des Mediums (Smartphone-Bildschirm, Monitorgröße etc. )
Beispiel: @media screen and (device-width: 800px) { … }
- device-height
Höhe des Mediums (Smartphone-Bildschirm, Monitorgröße etc.)
Beispiel: @media screen and (device-height: 400px) { … }
- orientation
Beschreibt ob ein Gerät im Querformat (landscape) oder im Hochformat gehalten wird (portrait).
Beispiel: @media all and (orientation:portrait) { … }
Anhand der Beispiele sieht man auch gleich wie diese Abfragen verknüpft werden können.
Auch hierzu gibt es eine offizielle Spezifikation vom w3c.
Media Query Beispiele
http://mediaqueri.es/
Responsive Design Frameworks
http://csswizardry.com/inuitcss/
Interessante Artikel zum Thema
Labels: cascading style sheets, css, css3, html5, media query, mobile, responsive, style, webdesign