Beispiel
Zwei verschiedene Stylesheets für zwei verschiedene Medientypen (Bildschirm und Druck):
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
Versuch es selber " Definition und Verwendung
Das media - Attribut gibt an, welche Medien / Gerät die Zielressource für optimiert.
Dieses Attribut wird meist mit CSS-Stylesheets verwendet, um verschiedene Stile für verschiedene Medientypen angeben.
Das media - Attribut kann mehrere Werte annehmen.
Browser-Unterstützung
| Attribut | |||||
|---|---|---|---|---|---|
| media | ja | ja | ja | ja | ja |
Unterschiede zwischen HTML 4.01 und HTML5
Das media - Attribut unterstützt nun mehr Werte.
Syntax
<link media="value">
Mögliche Operators
| Wert | Beschreibung |
|---|---|
| and | Gibt einen UND-Operator |
| not | Gibt einen NOT-Operator |
| , | Gibt einen OR-Operator |
Geräte
| Wert | Beschreibung |
|---|---|
| all | Standard. Geeignet für alle Geräte |
| aural | Sprachsynthesizer |
| braille | Braille-Feedback-Geräte |
| handheld | Handheld-Geräte (kleiner Bildschirm, begrenzte Bandbreite) |
| projection | Projektoren |
| Der Vorschaumodus / Druckseiten | |
| screen | Computer-Bildschirme |
| tty | Fernschreiber und ähnliche Medien einen festen Zeichenraster mit |
| tv | TV-Typ-Geräte (niedrige Auflösung, begrenzte Scroll-Fähigkeit) |
Werte
| Wert | Beschreibung |
|---|---|
| width | Gibt die Breite des Zielanzeigebereich. "min-" und "max-" Präfixe verwendet werden kann. Beispiel: media="screen and (min-width:500px)" |
| height | Gibt die Höhe des Zielanzeigebereich. "min-" und "max-" Präfixe verwendet werden kann. Beispiel: media="screen and (max-height:700px)" |
| device-width | Gibt die Breite des Zielanzeige / Papier. "min-" und "max-" Präfixe verwendet werden kann. Beispiel: media="screen and (device-width:500px)" |
| device-height | Gibt die Höhe des Zielanzeige / Papier. "min-" und "max-" Präfixe verwendet werden kann. Beispiel: media="screen and (device-height:500px)" |
| orientation | Gibt die Ausrichtung des Zielanzeige / Papier. Mögliche Werte: "portrait" oder "landscape" Beispiel: media="all and (orientation: landscape)" |
| aspect-ratio | Gibt die Breite / Höhe-Verhältnis der Zielanzeigebereich. "min-" und "max-" Präfixe verwendet werden kann. Beispiel: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | Gibt die Gerätebreite / device-Höhe-Verhältnis der Zielanzeige / Papier. "min-" und "max-" Präfixe verwendet werden kann. Beispiel: media="screen and (aspect-ratio:16/9)" |
| color | Gibt die Bits pro Farbe des Zielanzeige. "min-" und "max-" Präfixe verwendet werden kann. Beispiel: media="screen and (color:3)" |
| color-index | Gibt die Anzahl der Farben kann die Zielanzeige behandeln. "min-" und "max-" Präfixe verwendet werden kann. Beispiel: media="screen and (min-color-index:256)" |
| monochrome | Gibt die Bits pro Pixel in einem Monochrom-Frame-Puffer. "min-" und "max-" Präfixe verwendet werden kann. Beispiel: media="screen and (monochrome:2)" |
| resolution | Gibt die Pixeldichte (dpi oder dpcm) der Zielanzeige / Papier. "min-" und "max-" Präfixe verwendet werden kann. Beispiel: media="print and (resolution:300dpi)" |
| scan | Gibt Scan-Methode von einer TV-Anzeige. Mögliche Werte sind "progressive" und "interlace" . Beispiel: media="tv and (scan:interlace)" |
| grid | Gibt an, ob das Ausgabegerät Raster oder Bitmap ist. Mögliche Werte sind "1" für die Netz, und "0" sonst. Beispiel: media="handheld and (grid:1)" |