CSS - Media-Queries für Tablets und Smartphones - Teil 2

Im zweiten Teil beschäftigen wir uns mit den Media-Queries Möglichkeiten von Tablets und Smartphones.

Anpassungen für Tablets

Tablets werden oft quer gehalten (Landscape-Modus) und haben eine typische Fensterbreite von 1.024 Pixel. Daher müssen wir das Layout so anpassen, dass die Seitenleiste mit den Infos oberhalb des Fußbereichs angezeigt und dafür das div-Element mit dem Inhalt breiter dargestellt wird.

Beispiel

/* Media-Query für Tablets */
@media only screen and (max-device-width: 1024px) {
div#wrapper { width:100%; }
div#content { width: 83%; } /* 2% margin von der ersten Definition */
div#sidebar_nav {
width:15%;
margin-right: 0;
margin-bottom: 1%;
}
div#sidebar_info {
width: 100%;
height: 160px;
}
}

Erläuterung

Durch den Media-Query wenden Sie jetzt zusätzliche CSS-Stile an. Diese ergänzen die vorher definierten Stile. Aber nur unter der Bedingung, dass die Webseite auf einem Bildschirm (only screen) dargestellt wird und dieser eine maximale Breite (die mögliche Anzeigebreite wird mit max-device-width festgelegt) von 1.024 Pixeln besitzt. Dadurch werden die Breiten der mittleren Elemente verändert. Besonders die Info-Seitenleiste verschiebt sich unter dem Inhalt, da sie mit 100% Breite nicht mehr rechts angezeigt werden kann.

Wollen Sie die Einstellungen auf einem Desktop-Browser prüfen, können Sie statt mit max-device-width mit dem Media-Query max-width arbeiten. So können Sie durch die Änderungen der Browserbreite die Stile testen.

Anpassungen für Smartphones

Smartphones haben generell kleinere Anzeigen. Daher müssen Sie auch für diese Devices die CSS-Datei ergänzen und das Layout entsprechend ändern. Natürlich besitzen die meisten Smartphones eine Zoom-Funktion, aber besonders benutzerfreundlich ist dies nicht. Besser wäre es, wenn Sie dem Benutzer sofort eine passende Version Ihrer Webseite anzeigen.

/* Media-Query für Smartphones */
@media only screen and (max-device-width: 480px) {
div#wrapper {
width: 100%;
margin-right: 0;
margin-bottom: 2%;
}
div#content {
width: 98%;
margin: 0 auto;
}
div#sidebar_nav {
width: 100%;
height: 200px;
margin-right: 0;
margin-bottom: 1%;
}
div#sidebar_info {
width: 100%;
height: 160px;
margin-top: 1%;
}
}

Erläuterung

Durch den Media-Query wenden Sie jetzt zusätzliche CSS-Stile für Smartphones an. Diese ergänzen die vorher definierten Stile für den Desktop-Browser, lassen aber jene für Tablets außer Acht. Jedoch nur unter der Bedingung, dass die Webseite auf einem Bildschirm (only screen) angezeigt wird und dieser eine maximale Breite (die mögliche Anzeigebreite wird mit max-device-width festgelegt) von 480 Pixeln besitzt.

Dadurch werden die Breiten der mittleren Elemente verändert. Vor allem schieben sich die Seitenleisten unter den Inhalt, da sie mit 100% Breite nicht mehr rechts angezeigt werden können.

Ganzen Artikel lesen...