HTML <style> mediaAttribut
Beispiele
Zwei verschiedene Stylesheets für zwei verschiedene Medientypen (Bildschirm und Druck):
Selbst ausprobieren »
Browser-Unterstützung
Alle gängigen Browser unterstützen das media-Attribut.
Definition und Verwendung
Das media-Attribut gibt an, für welches Medium/Gerät die aktuelle Ressource optimiert ist.
Dieses Attribut wird hauptsächlich in CSS-Stylesheets verwendet, um unterschiedliche Stile für verschiedene Medientypen anzugeben.
Tipp:Dieses Attribut kann mehrere Werte akzeptieren.
Unterschiede zwischen HTML 4.01 und HTML5
Keine.
Syntax
Mögliche Operatoren
| Wert | Beschreibung |
|---|---|
| und | Gibt den AND-Operator an. |
| not | Gibt den NOT-Operator an. |
| , | Gibt den OR-Operator an. |
Geräte
| Wert | Beschreibung |
|---|---|
| all | Standard. Gilt für alle Geräte. |
| aural | Sprachsynthesizer. |
| braille | Braille-Rückmeldungsgeräte für Blinde. |
| handheld | Handheld-Geräte (kleine Bildschirme, begrenzte Bandbreite). |
| projection | Projektoren. |
| Druckvorschau-Modus / gedruckte Seiten. | |
| Bildschirm | Computerbildschirm (Standard). |
| tty | Fernschreiber und ähnliche Medien, die ein Festbreiten-Zeichenraster verwenden. |
| tv | TV-Geräte (niedrige Auflösung, begrenzte Bildschirm-Scrollfähigkeit). |
Wert
| Wert | Beschreibung |
|---|---|
| width |
Gibt die Breite des Zielanzeigebereichs an. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (min-width:500px)" |
| height |
Gibt die Höhe des Zielanzeigebereichs an. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (max-height:700px)" |
| device-width |
Gibt die Breite des Zielanzeige-/Papierbereichs an. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (device-width:500px)" |
| device-height |
Gibt die Höhe des Zielanzeige-/Papierbereichs an. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (device-height:500px)" |
| orientation |
Gibt die Ausrichtung der Zielanzeige/-papiers an. Mögliche Werte: "portrait" oder "landscape" Beispiel: media="all and (orientation: landscape)" |
| aspect-ratio |
Gibt das Breiten-/Höhenverhältnis des Zielanzeigebereichs an. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio |
Gibt das Verhältnis von Gerätebreite zu Gerätehöhe der Zielanzeige/-papiers an. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (device-aspect-ratio:16/9)" |
| color |
Gibt die Bits/Farbe der Zielanzeige an. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (color:3)" |
| color-index |
Gibt die Anzahl der Farben an, die die Zielanzeige verarbeiten kann. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (min-color-index:256)" |
| monochrome |
Gibt die Bits/Pixel in einem monochromen Framebuffer an. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (monochrome:2)" |
| Auflösung |
Gibt die Pixeldichte (dpi oder dpcm) des Ziel-Displays/Zielpapiers an. Die Präfixe "min-" und "max-" können verwendet werden. Beispiel: media="print and (resolution:300dpi)" |
| scan |
Gibt die Abtastmethode von TV-Displays an. Mögliche Werte: "progressive" und "interlace". Beispiel: media="tv and (scan:interlace)" |
| grid |
Gibt an, ob das Ausgabegerät ein Gitter oder eine Bitmap ist. Mögliche Werte: "1" für Gitter, andernfalls "0". Beispiel: media="handheld and (grid:1)" |
HTML <style> Tag Andere Erweiterungen