template
Index :: CSS :: Responsive Design
Aufgrund der mittlerweile verfügbaren recht unterschiedlichen Displaygrößen kann es erforderlich sein, zur Darstellung einer Webseite individuelle Layouts einzusetzen. Eine entscheidende Rolle spielt hierbei die Breite der Fensterfläche, die von einigen hundert (z.B. bei Handhelds/Phones) bis über 2500 Pixel (z.B. bei HD-Monitor) betragen kann.
Im Gegensatz zu Großbildschirmen, auf denen ein Standard-Layout (1024 x 786) problemlos angezeigt werden kann, stellen kleine Geräte eine Herausforderung dar - hier zählt jedes Pixel. Basiselemente wie Menü/Navigation und Content müssen meist in einer einzelnen Spalte untereinander angeordnet werden, und Bilder sollten in einer verkleinerten Version vorliegen.
Während sich grobe Layout-Anpassungen (Flow, Positionierung und Skalierung) recht schnell mittels CSS realisieren lassen, sind bezüglich der Details oft tiefgreifendere Überlegungen nötig, vor allem, wenn es sich um nebeneinanderliegende Elemente handelt: Beschriftungen auf Buttons bzw. Schaltflächen müssen gekürzt werden, Menüs werden (ausklappbar) unter einem einzelnen Menü-Button verstaut, Sidebars (Infos/Links) werden - wenn man nicht gleich komplett auf sie verzichtet - nach unten ans Seitenende verschoben, viele Features (z.B. Hintergrundgrafik, große Logos, Schatten/3D-Effekte) werden stark minimiert oder ausgeblendet um die relativ kleine Fläche nicht zu überladen.
Die Auswahl eines passenden Stylesheets kann entweder per Javascript oder (bei neueren Browsern, die CSS3 Media Query unterstützen, z.B. ab MSIE9) per CSS erfolgen.
Das nachfolgende Beispiel beschreibt die passende Auswahl aus 3 Stylesheets: small.css für kleine Displays bis 600 px, large.css für Displays ab 1600 px und default.css für den Bereich dazwischen.
Im Header wird zunächst auf die Standard-Datei verwiesen:
<link id='cssfile' rel='stylesheet' type='text/css' href='default.css'>
Dieser link-Tag besitzt eine ID, damit er per Javascript angesprochen werden kann.
Das Auslesen der aktuellen Anzeigebreite lässt sich mittels Javascript folgendermaßen bewerkstelligen (siehe 
Demo: Anzeigebreite):
function getViewWidth(){
if (window.innerWidth) return window.innerWidth;
else if (document.documentElement && document.documentElement.clientWidth != 0)
return document.documentElement.clientWidth;
else if (document.body) return document.body.clientWidth;
return 1024; //default
}
In der Funktion setStyle() wird entschieden, ob das aktuelle Stylesheet passt, oder ob ein anderes eingebunden werden muss:
(function setStyle(){
var w = getViewWidth(), s = document.getElementById('cssfile'),
f = ['small','default','large'], i;
if (w <= 600) i = 0; //klein
else if (w >= 1600) i = 2; //gross
else i = 1; //default
if (s.href !== f[i]+'.css') s.href = f[i]+'.css'; //Neuzuweisung, falls noetig
})()
Um auch nachträgliche manuelle Veränderungen des Browserfensters abzufangen, bedienen wir uns des onresize-Events:
window.onresize=setStyle;
Mittels min-width und max-width kann quasi eine CSS-Weiche eingerichtet werden, die sich an der Anzeigebreite orientiert:
@media screen and (max-width: 600px) {
... Style-Anweisungen für Breiten bis 600 px ...
}
@media screen and (min-width: 601px) and (max-width: 1199px) {
... Style-Anweisungen für Breiten zwischen 600 und 1200 px ...
}
@media screen and (min-width: 1200px) {
... Style-Anweisungen für Breiten ab 1200 px ...
}
Diese Angaben lassen sich bereits beim Einbinden externer Stylesheets hinterlegen:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css">
<link rel="stylesheet" media="screen and (min-width: 601px) and (max-width: 1199px)" href="default.css">
<link rel="stylesheet" media="screen and (min-width: 1200px)" href="large.css">
In der Demo werden so 5 Bereiche unterschieden.
| template |
 |