Responsive Webdesign ist in der heutigen Zeit im WWW ein sehr großes Thema. Aber wie wird dies dann technisch umgesetzt?

Die Technik hinter Responsive Webdesign

Seit CSS3 können sogenannte Media Queries (zu deutsch etwa: Medienabfragen) genutzt werden, um die Darstellung bei vorgegebenen Dimensionen eines Geräts zu beeinflussen. Diese Media Queries werden genutzt, um unterschiedliche CSS Regeln basierend auf verschiedenen Faktoren eines Geräts zu erstellen. Dies ermöglicht uns die Erstellung von responsiven Webseiten.

Responsive Webdesign Media Queries

Auch www.vierpunkt.de ist responsive – dank Media Queries!

Die Nutzung von Media Queries

Am einfachsten und wahrscheinlich auch sinnvollsten ist die Nutzung der Media Queries am Ende einer vorhandenen Stylesheet-Datei. Dort werden diese dann folgendermaßen eingebunden:

@media LOGIK MEDIUM and (FAKTOREN) { REGELN }

Bestandteile eines Media Queries

LOGIK
Die Logik kann das Keyword „only“ oder „not“ enthalten und bezieht sich auf das nachfolgende Medium. Die Angabe einer Logik ist jedoch nicht unbedingt erforderlich.

MEDIUM
Im Medium kann angegeben werden, um welches Gerät bzw. Medium es sich bei der Ausgabe handelt. Hier kann z.B. zwischen „screen“ und „print“ unterschieden werden“. Zwischen MEDIUM und den FAKTOREN steht das Wort „and“.

FAKTOREN
Die Faktoren sind Angaben, welche die Dimensionen und Eigenschaften des Betrachtungsgeräts beschreiben, um eine genaue Darstellung der Media Queries zu gewährleisten. Hier können Angaben wie Displaybreite, Auflösung u.s.w. genannt werden. Auch die Ausrichtung des Geräts (Portrait oder Landscape) kann hier angegeben werden.

REGELN
In den Regeln stehen die üblichen CSS-Anweisungen, die dann für dieses Media Query gelten sollen. Hier kann somit das Styling der responsiven Webseite bestimmt werden. Zu beachten ist, dass hier nicht alle Anweisungen erneut erfolgen müssen, sondern nur die jeweiligen Änderungen gegenüber der originalen Darstellung (floating aufheben u.s.w.)

Somit erhalten wir für ein iPhone 6 im Portraitmodus (Displaybreite = 667px) das Media Query (gekürzt):

@media screen and (max-device-width=667px) {}

Übliche Media Queries

Natürlich müssen Sie sich nicht jedes Media Query selbst erarbeiten und die gerätespezifischen Faktoren zusammensuchen. Wir haben auch eine Übersicht über die üblichen Media Queries für Sie vorbereitet:

/* Smartphone (Portrait & Landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }

/* Smartphone (Landscape) */
@media only screen and (min-width : 321px) { }

/* Smartphone (Portrait) */
@media only screen and (max-width : 320px) { }

/* iPad (Landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { }

/* iPad (Portrait) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { }

/* Desktop & Laptop */
@media only screen and (min-width : 1224px) { }

/* Große Bildschirme */
@media only screen and (min-width : 1824px) { }

/* iPhone 4*/
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { }

/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { }

/*iPhone 6 Landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { }

/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { }

/*iPhone 6+ Landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { }