HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML source media Eigenschaft

Die source media Eigenschaft akzeptiert jede gültige Medienabfrage, die normalerweise in CSS definiert wird, und die media Eigenschaft kann mehrere Werte akzeptieren.

　HTML <source> Tag

Online-Beispiel

Ein <picture>-Element mit zwei Quelldaten und einem alternativen Bild:

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Verwendung der HTML source media Eigenschaft-Einführung(oldtoolbag.com)</<title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</<head>
<body>
<picture>
　　<source media="(min-width:　650px)" srcset="img_pink_flowers.jpg">
　　<source media="(min-width:　465px)" srcset="img_white_flower.jpg">
　　<img src="img_orange_flowers.jpg" alt="Blumen" style="width:auto;">
</picture>
<p>Passen Sie die Größe des Browsers an, um verschiedene Versionen der geladenen Bilder bei verschiedenen Ansichtsbreiten zu betrachten. Der Browser sucht nach dem ersten source-Element, das mit der aktuellen Breite des Benutzeransichtsfensters übereinstimmt, und holt das Bild, das in der srcset-Attribut angegeben ist.</p>
<p>Das img-Element ist das letzte Unter-Element des Bild-Aufruf-Blocks. Das img-Element wird verwendet, um Browser, die das picture-Element nicht unterstützen oder keine übereinstimmenden Quelldaten haben, eine Rückwärtskompatibilität zu bieten.
</p>
</body>
</html>

Testen Sie ‹/›

Browser-Kompatibilität

IEFirefoxOperaChromeSafari

Alle gängigen Browser unterstützen das media-Attribut. Hinweis: IE12und frühere Versionen oder Safari 9.0 und frühere Versionen unterstützen das picture-Element nicht

Definition und Verwendung

Die media-Eigenschaft akzeptiert alle im CSS definierten gültigen Medienabfragen.

Hinweis:Diese Eigenschaft akzeptiert mehrere Werte.

HTML 4.01 zu HTML5Unterschiede

<source> ist ein HTML5 neue Tags.

Syntax

<source media="value>

Mögliche Operatoren

Wert	Beschreibung
and	Bestimme einen AND-Operator.
not	Bestimme einen NOT-Operator.
,	Bestimme einen OR-Operator.

Gerät

Wert	Beschreibung
all	Standard. Gilt für alle Geräte.
aural	Sprachsynthese.
braille	Blindenleitsystem.
handheld	Handheld-Gerät (kleiner Bildschirm, begrenzte Bandbreite).
projection	Projektor。
print	Druckvorschau-Modus/Druckseite。
screen	Computerbildschirm。
tty	Telegraphie-Teletyp sowie ähnliche Medien mit einer gleich breiten Zeile.
tv	Fernseher-Typ-Gerät (niedrige Auflösung, begrenzte Scrollfähigkeit).

Wert

Wert	Beschreibung
width	bestimmt die Breite der Zielbildschirmregion Verwenden Sie "min-" und "max-" Präfix. Beispiel: media="screen and (min-width:500px)"
height	bestimmt die Höhe der Zielbildschirmregion Verwenden Sie "min-" und "max-" Präfix. Beispiel: media="screen and (max-height:700px)"
device-width	Bestimmen Sie das Ziel-Display/Papierbreite。 Verwenden Sie "min-" und "max-" Präfix. Beispiel: media="screen and (device-width:500px)"
device-height	Bestimmen Sie das Ziel-Display/Papierhöhe。 Verwenden Sie "min-" und "max-" Präfix. Beispiel: media="screen and (device-height:500px)"
orientation	Bestimmen Sie das Ziel-Display/Papierrichtung。 Mögliche Werte: "portrait" oder "landscape"。 Beispiel: media="all and (orientation: landscape)"
aspect-ratio	bestimmt die Breite der Zielbildschirmregion/Höhenverhältnis。 Verwenden Sie "min-" und "max-" Präfix. Beispiel: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio	Bestimmen Sie das Ziel-Display/Papier des device-width/device-height Ratio。 Verwenden Sie "min-" und "max-" Präfix. Beispiel: media="screen and (aspect-ratio:16/9)"
color	bestimmt die Bits des Zielbildschirms/color。 Verwenden Sie "min-" und "max-" Präfix. Beispiel: media="screen and (color:3)"
color-index	Bestimmen Sie die Anzahl der Farben, die das Ziel-Display verarbeiten kann. Verwenden Sie "min-" und "max-" Präfix. Beispiel: media="screen and (min-color-index:256)"
monochrome	Bestimmen Sie die Bits im monochromen Framebuffer./Pixel. Verwenden Sie "min-" und "max-" Präfix. Beispiel: media="screen and (monochrome:2)"
resolution	Bestimmen Sie das Ziel-Display/Pixel-Dichte des Papiers (dpi oder dpcm). Verwenden Sie "min-" und "max-" Präfix. Beispiel: media="print and (resolution:300dpi)"
scan	Bestimmen Sie die Scansoftware des TV-Displays. Mögliche Werte: "progressive" und "interlace". Beispiel: media="tv and (scan:interlace)"
grid	Bestimmen Sie, ob das Ausgabegerät ein Gitter oder ein Raster ist. Mögliche Werte:"1" für Gitter, andernfalls "0". Beispiel: media="handheld and (grid:1)"

　HTML <source> Tag

HTML: <template> Tag