Veit Schiele

Veit Schiele

Ausgabemedien

Media Types

Mit Media Types können Ausgabemedien wie z.B. Bildschirm oder Drucker unterschieden werden. Diese erfordern unterschiedliche Formatierungen für die Gestaltung der Daten. Während am Bildschirm etwa ein längerer Text in heller Schrift auf dunklem Hintergrund gut lesbar sein kann, ist dies für die Ausgabe am Drucker keine gute Lösung. Bei der Bildschirmausgabe muss Ihnen die URL von Verweisen nicht angezeigt werden während die entsprechende Angabe auf Papier sehr informativ sein kann. Deshalb können Sie für verschiedene Ausgabemedien verschiedene externe CSS-Dateien einbinden, die wiederum unterschiedliche Formatdefinitionen enthalten können. Der Browser entscheidet beim Präsentieren der Seiten, welche der eingebundenen CSS-Dateien maßgeblich ist. Wenn der Web-Browser also beispielsweise die Seiten am Bildschirm anzeigt, sollte er die CSS-Datei verwenden, die Sie explizit für das Medium 'screen' bestimmen, und wenn der Anwender eine Seite ausdruckt, sollte der Browser stattdessen die CSS-Datei verwenden, die Sie für das Medium 'print' angeben.

media="all"
CSS-Datei gilt für alle Medientypen.
media="aural"
CSS-Datei gilt für computergesteuerte, synthetische Sprachausgabe. Beachten Sie in diesem Zusammenhang auch die Seite CSS-Eigenschaften für Sprachausgabe.
media="braille"
CSS-Datei gilt für Ausgabegeräte mit so genannter «Braille-Zeile».
media="embossed"
CSS-Datei gilt für Braille-Drucker.
media="handheld"
CSS-Datei gilt für Organizer.
media="print"
CSS-Datei gilt für den Ausdruck.
media="projection"
CSS-Datei gilt für die Datenprojektion mit Beamern.
media="screen"
CSS-Datei gilt für die Bildschirmanzeige.
media="tty"
CSS-Datei für nicht-grafische Ausgabemedien mit fixer Zeichenbreite.
media="tv"
CSS-Datei gilt für Fernsehgeräte, die Scrollen nicht erlauben.

Media Queries

Mit Media Queries wird zwischen verschiedenen Medientypen unterschieden, z.B.:

@media screen and (min-width: 1024px) {
    body {
        font-size: 100%;
   }
}

link-Element:

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

@import-Anweisung:

@import url("wide.css") screen and (min-width: 1024px);
NameBeschreibungmin- und max- Präfix
widthBreite des Elements
heightHöhe des Elements
device-widthBreite des Displays
device-heightHöhe des Displays

Die verschiedenen Queries können kombiniert werden mit and, z.B.:

@media screen and (min-device-width: 480px) and (orientation: landscape) {…}

viewport

<meta name="viewport" content="initial-scale=1.0, width=device-width" />
initial-scale
Eigenschaft, die das Zoom-Level der Seite auf 1.0 oder 100% festlegt.
width

legt die Breite der Seite fest.

Dies kann entweder eine feste Breite sein oder abhängig vom jeweiligen Display.

Beispiel

@media screen and (max-width: 768px) {
    …
}
@media screen and (max-width: 520px) {
    …
}
@media screen and (min-width: 1200px) {
    …
}

Browser-Kompatibilität