Responsive Webdesign • Teil 2 • Media Queries

Auch in der Programmierung gilt: von klein nach groß

Nach dem Layouten kommt auch bei responsive Webseiten die Umsetzung und wie auch im Design gilt: jeder Webentwickler muss nach und nach schauen, was der beste Weg für Ihn ist. Mein Tipp ist jedoch: Beginnt mit der mobilen Seite und arbeitet euch dann zur Desktopseite vor.

Es gibt leider immer noch Browser, welche Probleme mit Media Queries haben. Deswegen ist es am Besten, wenn man mit dem kleinen Layout beginnt. So wird in jedem Browser, der keine Media Queries unterstützt, die mobile Version dargestellt.

Was sind Media Queries?

Wenn man die mobile Darstellung fertig hat, muss man dem CSS sagen, was es ändern soll, wenn eine bestimmte Breite erreicht ist. Dazu verwendet man Media Queries. Ein kleines Beispiel:

body{
background: red;
}

@media screen and (min-width: 525px){
body{
background: blue;
}
}

In diesem Fall ist der Body in allen Browsern standardmäßig rot. Wenn der Browser jedoch eine Breite von 525px und mehr hat, wird der Hintergrund blau. Das Beispiel selbst ist jetzt natürlich aus der Luft gegriffen. Dennoch sind Media Queries das wichtigste Werkzeug, um responsive Webseiten zu entwickeln. Man kann Schriftgrößen ändern, Boxen, die im mobilen Layout untereinander stehen, ab einer gewissen Breite nebeneinander setzen, das Menü ändern und anders positionieren und vieles mehr.

Weitere Schlüsselwörter für Media Queries

@media print
// Nur für die Druckversion
@media screen and (orientation: portrait)
// Für die Hochkantdarstellung, besonders interessant bei Handys
@media screen and (orientation: landscape)
// Für die Querformatdarstellung, besonders interessant bei Handys
@media (min-width: 950px)
// Mindestbreite des Browsers von 950px
@media (max-width: 950px)
// Maximalbreite des Browsers von 950px
@media (min-device-width: 480px)
// Minimalbreite des Gerätes von 480px
@media (max-device-width: 480px)
// Maximalbreite des Gerätes von 480px
@media (device-aspect-ratio: 16/9)
// Seitenverhältnis von 16/9
@media (min-width: 450px) and (max-width: 950px)
// Breite liegt zwischen 450 und 950px

Wer Media Queries nicht in einer CSS-Datei verwalten will, kann diese natürlich auch beim Einbinden des Files festlegen. Im Beispiel wird die CSS-Datei nur geladen, wenn es eine Screen-Darstellung mit mindestens 800px Breite oder eine Druckdarstellung mit maximal 800px Breite ist.

Um bei Retina-Displays hochauflösende Hintergrund-Bilder zu verwenden, stehen natürlich spezielle Media Queries zur Verfügung. Hier hat Apple für seine Retina-Darstellung mit „-webkit-min-device-pixel-ratio“ eine eigene Angabe entwickelt, wo das Verhältnis CSS-Pixel zu Display-Pixel berechnet wird. Für alle anderen Geräte benötigt man noch weitere Angaben. Die dpi-Angabe (Dots per Inch) wird von allen anderen Browsern erkannt, da dies aber bei Screen-Darstellungen irreführend ist, lautet der neue Standard dppx (Dots per Pixel).

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)

Wenn man das verinnerlicht hat, ist der Großteil Im ersten Teil findet Ihr alles über die Grundlagen von responsive Webseiten und was man beim Design beachten sollte.

Du hast Fragen zu diesem Thema? Kein Problem, kontaktiere mich einfach unter post@christian-maerz.de