Media Queries
Media Queries erlauben es, Regelblöcke nur auf bestimmte Ausgabemedien anzuwenden. Hierbei kann sowohl der Typ (Bildschirm oder Drucker) als auch die Auflösung abgefragt werden. Mit Hilfe dieser Technologie werden zum einen Webseiten druckoptimiert und zum anderen responsiv gemacht. Das Erstellen eines solchen „mehrgleisigen“ Layouts bedeutet natürlich mehr Aufwand, doch dieser Aufwand lohnt sich. Spätestens jetzt werden Sie merken, wie wichtig ein gutes HTML-Layout ist.
Für die Definition von Media Queries gibt es mehrere Möglichkeiten. Zum einen ist es möglich, innerhalb einer Datei
(oder innerhalb der style
-Tags) die sogenannte @media
-Rule einzufügen. Dies sieht nun bspw.
wie folgt aus:
@media screen { /* Hier kommt der Code für die Browseranzeige! */ } @media print { /* Hier kommt der Code für die Druckausgabe! */ }
Alternativ können wir den CSS-Code in mehrere Dateien aufteilen und eine Unterscheidung des Medientyps an Hand des
media
-Attributs im link
-Element durchführen:
<link rel="stylesheet" href="/web.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/papier.css" type="text/css" media="print" />
Bei der Angabe eines Medientyps werden die Schlüsselwörter all
(alle Medien), screen
(Browseranzeige)
oder print
(Druckausgabe) verwendet. Diese Schlüsselwörter können mit dem Schlüsselwort and
und
weiteren Angaben kombiniert werden. Mehrere Media Queries können mit Hilfe eines Kommas kombiniert werden. Um die Größe des
Ausgabemediums zu überprüfen, stehen uns die Eigenschaften min-width
und max-width
zur Verfügung.
Um solche Eigenschaften in Media Queries einzubauen, wird der Eigenschaftsname gefolgt von einem Doppelpunkt und dem
Wert in Klammern notiert. Dies kann dann z. B. so aussehen:
@media screen and (max-width: 800px) { /* Hier kommt der Code! */ }
Eine Angabe wie (min-width: 400px)
bewirkt, dass die CSS-Regeln auf alle Geräte angewendet werden, bei
welchen die Breite des Ausgabemediums größer oder gleich 400px sind. Eine Angabe wie (max-width: 800px)
wendet die CSS-Regeln auf allen Geräte an, bei welchen die Breite des Augabemediums kleiner oder gleich 800px sind.
Wichtig: Ältere Browser unterstützen nur die einfache Form der Media Queries (und nicht die Verwendung der
Eigenschaften min-width
oder max-width
), mit welchen lediglich zwischen screen
und print
unterschieden wird. Das Problem das hierdurch entsteht, ist, dass der Browser den zuletzt
erkannten Medientyp screen
fälschlicherweise für alle Browseranzeigen anwendet. Um diesem Problem
entgegenzuwirken, notieren wir vor dem Medientyp der „problematischen“ Media Queries das Schlüsselwort only
.
Moderne Browser ignorieren dieses Schlüsselwort, beachten jedoch das Media Query selbst. Ältere Browser kennen das
only
Schlüsselwort nicht und verwerfen den kompletten Media Query.
@media only screen and (max-width: 800px) { /* Hier kommt der Code! */ }
Druck-Optimierung
Um unsere Webseite für den Druck zu optimieren, können wir ein Media Query mit dem Schlüsselwort print
nutzen. Bei der Druck-Optimierung sollte darauf geachtet werden, dass unwichtige Bestandteile der Website ausgeblendet
werden. Hierzu zählen z. B. Navigationsleisten oder auch die Fußzeile. Des Weiteren sollte auch beachtet werden, dass
Hintergründe (Bild und Farbe) von Browsern standardmäßig nicht gedruckt werden. Deshalb sollten diese in Druck-Layouts
weitestgehend vermieden werden.
In CSS gibt es die Eigenschaften page-break-after
(Seitenumbruch nach dem Element), page-break-before
(Seitenumbruch vor dem Element) und page-break-inside
(Seitenumbruch innerhalb des Elements), mit welchen die
Umbrüche gesteuert werden können. Für alle Eigenschaften stehen die Werte auto
(Browser entscheidet über den
Seitenumbruch) und avoid
(Seitenumbruch vermeiden, wenn möglich) zur Verfügung. Für die Eigenschaften
page-break-after
und page-break-before
stehen zusätzlich die Werte always
(Seitenumbruch
immer einfügen), left
(fügt einen Seitenumbruch ein, sodass die nächste Seite eine linke Seite ist) und
right
(fügt einen Seitenumbruch ein, sodass die nächste Seite eine rechte Seite ist) zur Verfügung.
Das folgende Beispiel zeigt ein Webseiten-Layout mit einfachen Druck-Optimierungen:
<div id="seite"> <header> <h1>Meine Webseite</h1> </header> <nav> <ul> <li><a href="">Seite 1</a></li> <li><a href="">Seite 2</a></li> <li><a href="">Seite 3</a></li> <li><a href="">Seite 4</a></li> <li><a href="">Seite 5</a></li> </ul> </nav> <main> <p>...</p> <article> <h2>Artikel 1</h2> <p>...</p> </article> <article> <h2>Artikel 2</h2> <p>...</p> </article> <article> <h2>Artikel 3</h2> <p>...</p> </article> <article> <h2>Artikel 4</h2> <p>...</p> </article> <article> <h2>Artikel 5</h2> <p>...</p> </article> </main> <footer> <img src="/Bilder/Logo/Logo.jpg" width="50" height="50" alt="Logo" title="Homepage-Webhilfe" /> <p> Copyright 2016 by Homepage-Webhilfe<br /> All rights reserved! </p> <br /> </footer> </div>
@media all { /* Seiten-Titel */ header>h1 { margin: 0 0 10px; padding: 0; text-align: center; } /* Inhaltsbereich */ main h2 { margin: 25px 0 0; padding: 0; } main p { margin: 5px 5px 0; text-align: justify; } } @media screen { body { /* Hintergrundfarbe um Seiten-Container abzusetzen */ background-color: #EEEEEE; } /* Seiten-Container */ #seite { background-color: white; margin: 20px; padding: 10px; } /* Navigationsleiste (links mit Aufzählungspunkten) */ nav { float: left; width: 20%; } /* Inhaltsbereich */ main { float: right; width: 80%; } main p:last-child { /* Abstand zur Fußzeile halten */ margin-bottom: 40px; } /* Fußzeile * links -> Bild * rechts -> Copyright-Hinweis */ footer { margin: 0 10px; padding-top: 10px; /* Elementfluss der Navigationsleiste und des Inhaltsbereichs beenden */ clear: both; border-top: 2px solid black; } footer>img { float: left; width: 50px; } footer>p { float: right; width: calc(100% - 50px); text-align: center; margin: 0; } footer>br { /* Elementfluss für Logo und Copyright-Hinweis beenden */ clear: both; } } @media print { /* Navigationsleiste -> für Druck ausblenden */ nav { display: none; } /* Seitenumbruch steuern */ main>article { page-break-inside: avoid; } /* Fußzeile -> für Druck ausblenden */ footer { display: none; } }
Responsives Webdesign
Um ein responsives Webdesign zu erstellen, können bei den Media Queries die Eigenschaften min-width
und
max-width
abgefragt werden. Wie bereits oben erklärt, führt eine Angabe wie (max-width: 800px)
dazu, dass die dortigen Regeln für alle Geräte mit einer Auflösung von 800px oder kleiner angewendet werden. Bei
min-width
ist dies genau anders herum. Bei der Notation im CSS-Code oder bei der Einbindung im HTML-Code
muss auf die Reihenfolge geachtet werden. Wird max-width
verwendet, so müssen die Werte in absteigender
Reihenfolge (siehe Beispiel) notiert werden. Bei der Verwendung von min-width
hingegen in aufsteigender
Reihenfolge.
Bildquelle: Vektor-Grafik von Freepik
Für mobile Geräte muss der sogenannte „Viewport“ eingestellt werden. Dies kann mit Hilfe des meta
-Elements
und dem Attribut name
mit dem Wert viewport
eingestellt werden. Im content
-Attribut
können wir die Breite der Website und den Skalierungsfaktor einstellen. Hierfür notieren wir im
content
-Attribut den Wert width=device-width
. Diese Anweisung bewirkt, dass die angezeigte Größe
der Website der verfügbaren Breite des Geräts entspricht. Des Weiteren kann im content
-Attribut auch der Wert
initial-scale
angegeben werden. Hiermit ist es möglich, den Skalierungsfaktor einzustellen. Dieser sollte auf
1.0 gesetzt werden. Hierzu folgendes Beispiel, welches auf vielen Webseiten und auch im unteren Beispiel eingesetzt wird:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Das folgende Beispiel zeigt ein responsives Webdesign, welches eine Bildschirmansicht mit zwei zusätzlichen Abstufungen für kleinere Auflösungen enthält.
<div id="seite"> <header> <img src="/Bilder/Banner/Start-Banner.jpg" alt="Banner" title="Homepage-Webhilfe" /> </header> <nav> <ul> <li><a href="">Seite 1</a></li> <li><a href="">Seite 2</a></li> <li><a href="">Seite 3</a></li> <li><a href="">Seite 4</a></li> <li><a href="">Seite 5</a></li> </ul> </nav> <main> <p>...</p> <article> <h2>Artikel 1</h2> <p>...</p> </article> <article> <h2>Artikel 2</h2> <p>...</p> </article> <article> <h2>Artikel 3</h2> <p>...</p> </article> <article> <h2>Artikel 4</h2> <p>...</p> </article> <article> <h2>Artikel 5</h2> <p>...</p> </article> </main> <aside> <h2>Über uns</h2> <p>...</p> <h2>Wussten Sie schon?</h2> <p>...</p> </aside> <footer> Copyright 2016 by Homepage-Webhilfe - All rights reserved! </footer> </div>
@media all { body { background-color: #EEEEEE; } #seite { padding: 10px; margin: 10px; background-color: white; } header>img { width: 100%; } /* Navigation als 1. Spalte anzeigen */ nav { float: left; width: calc(20% - 20px); margin: 10px; } /* Inhaltsbereich als 2. Spalte anzeigen */ main { float: left; width: calc(60% - 20px); margin: 10px; } /* Nebenbereich als 3. Spalte anzeigen */ aside { float: right; width: calc(20% - 20px); margin: 10px; } footer { clear: both; text-align: center; } } /* Gilt für alle Bildschirme mit einer Auflösung <= 820px */ @media only screen and (max-width: 820px) { /* Ränder entfernen, sodass Seite direkt am Bildschirmrand beginnt */ body { margin: 0; padding: 0; } #seite { margin: 0; padding: 0; } /* Navigation etwas vergrößern und Inhaltsbereich etwas verkleinern */ nav { width: calc(30% - 20px); } main { width: calc(70% - 20px); } /* Nebenbereich unterhalb des Inhaltsbereichs anzeigen */ aside { float: right; width: calc(70% - 20px); clear: none; border-top: 1px solid black; } } /* Gilt für alle Bildschirme mit einer Auflösung <= 480px */ @media only screen and (max-width: 480px) { /* Navigation jetzt oberhalb des eigentlichen Inhaltes anzeigen */ nav { border-bottom: 1px solid black; } /* Navigation, Inhaltsbereich und Neben-Bereich bekommen die volle Breite */ nav, main, aside { float: left; width: calc(100% - 20px); clear: none; } }