HTML <style> media Eigenschaft

HTML <style> Tag

Definition und Verwendung

media Eigenschaft zur Bestimmung der Medien/Geräte, für die der CSS-Stil bestimmt (optimiert) ist.

Diese Eigenschaft wird verwendet, um zu bestimmen, welche Geräte (z.B. iPhone), Sprach- oder Druckmedien dem CSS-Stil zugewiesen sind.

Tipp:Dieser Eigenschaft können mehrere Werte zugewiesen werden.

Beispiel

Beispiel 1

Stile, die für den Druck festgelegt sind:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

Probieren Sie es selbst aus

Beispiel 2

Die两组样式的区分是通过使用 media-Attribut width-Funktion erreicht:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

Probieren Sie es selbst aus

Anmerkung:Wird bei einer Breite des Browserfensters von weniger als 500 Pixeln das erste Stile小组使用， bei einer Breite von mehr als 500 Pixeln das zweite Stile小组使用.

Syntax

<style media="value">

Mögliche Operator

Operator Beschreibung
and Vorgabe AND-Operator.
not Vorgabe NOT-Operator.
, Vorgabe OR-Operator.

Die Bedingungen für die Verwendung von Stilen können sehr detailliert gestaltet werden. Zunächst muss klar sein, welche Gerätetypen angegeben sind. Nachstehend eine Zusammenfassung aller zulässigen Werte:

Gerät

Gerät Beschreibung
all Standard. Gilt für alle Geräte.
aural Sprachsynthese.
braille Blindenschrift-Feedback-Geräte.
handheld Handheld-Geräte (kleine Bildschirme, begrenzte Bandbreite).
projection Beamer.
print Druckvorschau-Modus/Druckseite.
screen Computerbildschirm.
tty Telegraphie-Tastaturen und ähnliche Medien mit einem festen Abstandsgitter.
tv Fernsehgerätetypen (niedrige Auflösung, begrenzte Scrollfähigkeit).

Der Browser ist für die Interpretation der Gerätetypen verantwortlich. Einige Gerätetypen (z.B. screen und print) werden in den verschiedenen Browsern recht konsistent interpretiert, aber die Interpretation anderer Geräte (z.B. handheld) kann viel willkürlicher sein. Daher ist es sehr wichtig, zu überprüfen, ob die Interpretation des angegebenen Browsers für bestimmte Geräte mit der eigenen übereinstimmt.

Eigenschaft

Eigenschaft Beschreibung
width

Bestimmt die Breite des Zielsichters.

Es können die Präfixe "min-" und "max-" verwendet werden.

Beispiel: media="screen and (min-width:500px)"
height

Bestimmt die Höhe des Zielsichters.

Es können die Präfixe "min-" und "max-" verwendet werden.

Beispiel: media="screen and (max-height:700px)"
device-width

Bestimmt die Breite des Zielsichters/Papiers.

Es können die Präfixe "min-" und "max-" verwendet werden.

Beispiel: media="screen and (device-width:500px)"
device-height

Bestimmt die Höhe des Zielsichters/Papiers.

Es können die Präfixe "min-" und "max-" verwendet werden.

Beispiel: media="screen and (device-height:500px)"
orientation

Bestimmt die Richtung des Zielsichters/Papiers.

Unterstützte Werte: portrait oder landscape.

Diese Eigenschaft hat keine Begrenzungen.

Beispiel: media="all and (orientation: landscape)"
aspect-ratio

Bestimmt das Breite/Höhenverhältnis des Zielsichters.

Es können die Präfixe "min-" und "max-" verwendet werden.

Beispiel: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

Bestimmt das Gerätewidth/Deviceheight-Verhältnis des Zielsichters/Papiers.

Es können die Präfixe "min-" und "max-" verwendet werden.

Beispiel: media="screen and (aspect-ratio:16/9)"
color

Bestimmt die Anzahl der Bits pro Farbe des Zielsichters.

Es können die Präfixe "min-" und "max-" verwendet werden.

Beispiel: media="screen and (color:3)"
color-index

Bestimmt die Anzahl der Farben, die der Zielsichter verarbeiten kann.

Es können die Präfixe "min-" und "max-" verwendet werden.

Beispiel: media="screen and (min-color-index:256)"
monochrome

Bestimmt die Anzahl der Bits pro Pixel im monochromen Framebuffer.

Es können die Präfixe "min-" und "max-" verwendet werden.

Beispiel: media="screen and (monochrome:2)"
resolution

Bestimmt die Pixeldichte des Zielsichters/Papiers (dpi oder dpcm).

Es können die Präfixe "min-" und "max-" verwendet werden.

Beispiel: media="print and (resolution:300dpi)"
scan

Bestimmt den Scanmodus des Fernsehers.

Unterstützte Werte sind progressive und interlace.

Diese Eigenschaft hat keine Begrenzungen.

Beispiel: media="tv and (scan:interlace)"
grid

Definiert, ob das Ausgabegerät ein Raster oder ein Bitmap ist.

Rastereinheiten verwenden ein festes Raster, um Inhalte anzuzeigen, z.B. zeichenbasierte Terminals und Einweg-Pager mit einzeiliger Anzeige.

Unterstützte Werte sind 0 und 1 (1 bedeutet ein rasterbasiertes Gerät).

Diese Eigenschaft hat keine Begrenzungen.

Beispiel: media="handheld and (grid:1)"

Funktionen wie width werden oft mit den Begrenzungen min und max verwendet. Ohne diese Begrenzungen kann die Verwendung von Stilen ebenfalls auf sehr präzise Fenstergrößen angewendet werden, aber mit den Begrenzungen wird die Bedingung flexibler.

Die obige Tabelle listet und beschreibt die verfügbaren Funktionen. Ohne ausdrückliche Angabe können diese Funktionen mit min- und max- abgeändert werden, um Schwellenwerte anstatt präziser Werte zu bilden.

Ähnlich wie bei den spezifischen Geräten sind diese Funktionen ebenfalls vom Browser interpretiert. Die具体情况, welche Funktionen der Browser erkennt und wann und wie diese Funktionen existieren und verwendet werden können, sind vielfältig. Wenn Sie diese Funktionen in Stilen anwenden möchten, müssen Sie unbedingt umfassende Tests durchführen und bereit sein, alternative Stile bereitzustellen, falls die erwarteten Funktionen nicht verfügbar sind.

Browserkompatibilität

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung

HTML <style> Tag