öffentlich
Redaktion Druckversion

Responsives Layout für Webseiten

4.4
(5)
Beitrag bewerten
Ersten Kommentar schreiben
Stand: 14. Dezember 2012

Media Queries

Ein zentraler Bestandteil von responsiven Layouts sind die CSS3 Media Queries.

Bevor wir uns diese ansehen, erst einmal ein Blick zurück zum klassischen CSS 2.1: Bereits in CSS 2.1 gibt es die Möglichkeit, eigene Stylesheets oder CSS-Angaben je nach Ausgebegerät zu machen. So können Sie beispielsweise eigene Angaben für den Ausdruck definieren.

Das sieht zum Beispiel bei einem verlinkten Stylesheet so aus:

<link rel="stylesheet" href="zumdruckstylesheet.css" media="print" />

Der Zusatz media="print" bewirkt, dass das Stylesheet nur für die Druckversion genutzt wird.

Aber wir müssen dafür nicht mit externen Stylesheets arbeiten, sondern können auch innerhalb eines Stylesheets direkt die Angaben für das gewünschte Ausgabemedium über eine @-Regel zu machen:

@media print { /* Formatierung für den Ausdruck */ }
@media screen { /* Formatierung für den Bildschirm */ }

CSS3-Media Queries erweitern die media-Angaben aus CSS 2.1: Sie können nicht nur das Medium angeben (also z.B. print oder screen), sondern auch bestimmte Beschaffenheiten des Ausgabemediums abfragen. Am häufigsten eingesetzt wird die Abfrage nach der Mindest-/Maximalbreite des Ausgabegeräts:

Bei einem externen Stylesheet kann das so aussehen:

<link rel="stylesheet" href="gross.css" media="screen and (min-width: 640px)" />

Durch diesen Code wird das Stylesheet gross.css nur interpretiert, wenn die Webseite auf einem Bildschirm (screen) dargestellt wird, auf dem mindesten 640px in der Breite (min-width: 640px) zur Verfügung stehen.

Besonders praktisch sind diese Media Queries bei @-Regeln, da Sie dann nicht mehrere externe Stylesheetdateien einsetzen müssen.

@media screen and (min-width: 640px) { /* Formatierung für einen Bildschirm, wenn mindestens 640px zur Verfügung stehen */ }

Ein kleines Beispiel

Sehen wir uns ein kleines Beispiel an hierzu. In diesem lassen wir je nach verfügbarem Platz den Hintergrund der Seite anders einfärben:

  • Bei wenig Platz soll er orange sein.

  • Ab einer Mindestbreite von 540px wird Blau als Hintergrundfarbe definiert

  • Ab einer Mindestbreite von 740px wird der Hintergrund gelb eingefärbt.

Responsive Hintergrundfarbe

body {
 background-color: orange;
 }

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

@media screen and (min-width: 740px) {
 body {
 background-color: yellow;
 }
 }

Beispiel: So sieht es live aus

Online finden Sie das Beispiel ebenfalls: mediaqueries.html

Testen Sie das Beispiel einmal aus und verändern Sie die Breite des Browserfensters! Sie sollten sehen, wie die Hintergrundfarbe sich immer ändert.

Unterschiedliche eingefärbt je nach verfügbarem PlatzJe nach verfügbarem Platz ist die Webseite anders eingefärbt - möglich machen es die Media Queries.

Im Beispiel haben wir nur für body die Eigenschaft background-color gesetzt, stattdessen können Sie beliebige andere Formatierungen durchführen … und eben auch die Layoutelemente darüber unterschiedlich anordnen. Davor kümmern wir uns aber erst einmal um einen weiteren Bestandteil eines responsiven Layouts: um flüssige Breitenangaben, d.h. Breitenangaben in Prozent.

Als Mitglied können Sie diesen Beitrag weiterlesen!

Werden Sie Mitglied und testen Sie akademie.de 14 Tage lang kostenlos!

In den ersten 14 Tagen haben Sie Zugriff auf alle Inhalte auf akademie.de, außer Downloads. Sie können in dieser Zeit ohne Angabe von Gründen widerrufen. Eine E-Mail an service@akademie.de genügt. Nur wenn Sie Mitglied bleiben, wird der Mitgliedsbeitrag nach Ende der 14tägigen Widerrufsfrist abgebucht.

Ich bin bereits Mitglied
Jetzt Mitglied werden und akademie.de 14 Tage kostenlos testen
Ich entscheide mich für folgende Zahlungsweise:
14 Tage Widerrufsrecht:
Ich kann meine Mitgliedschaft in den ersten 14 Tagen jederzeit formlos widerrufen, z.B. per E-Mail an service@akademie.de.

Inhalt

Downloads zu diesem Beitrag

Über die Autorin:

bild117864

Dr. Florence Maurice bietet Dienstleistungen im Webpublishing in Form von Fachtexten und Trainings (auch maßgeschneiderte Inhouse-Schulungen). Außerdem programmiert sie Webseiten. Ihre Themen: HTML, ...

Newsletter abonnieren