öffentlich
Redaktion Druckversion

Responsives Layout für Webseiten

4.333335
(6)
Beitrag bewerten
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.

Mitglied werden

Als zahlendes Mitglied von akademie.de haben Sie vollen Zugriff auf alle Inhalte und können alle PDF-Dateien, Checklisten, Mustervorlagen und Anwendungen herunterladen.

Sind Sie sich noch unsicher? Dann wählen Sie die Option “akademie.de kostenlos testen”. So können Sie sich 14 Tage in Ruhe umschauen. Downloads stehen Ihnen in dieser Zeit nicht zur Verfügung. Gefällt Ihnen akademie.de nicht, reicht ein formloser Widerruf per E-Mail innerhalb der ersten 14 Tage. Es entstehen für Sie keine Kosten. Widerrufen Sie nicht, erhalten Sie nach Ablauf von 14 Tagen vollen Zugriff und der Mitgliedsbeitrag wird abgebucht.

Ich bin bereits Mitglied
Mitglied werden!
Ich entscheide mich für folgende Zahlungsweise:

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