HTML <source> medieegenskab

HTML <source> etiket

Definition og brug

media Egenskaben accepterer enhver gyldig medieforespørgsel, der normalt defineres i CSS.

Bemærk:Denne egenskab kan acceptere flere værdier.

Eksempel

En element, der indeholder to kilder og en reservebillede: <picture> elementet:

<picture>
  <source media="(min-width:650px)" srcset="flower-1.jpg">
  <source media="(min-width:465px)" srcset="flower-2.jpg">
  <img src="flower-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Prøv det selv

Syntaks

<source media="media_query>

Mögliche operatorer

Operatorer Beskrivelse
and Definerer AND-operator.
not Definerer NOT-operator.
, Definerer OR-operator.

Enhed

Værdi Beskrivelse
all Standard. Passer til alle enheder.
aural Røvsynteseenheder.
braille Braillefeedbackenheder.
handheld Håndholdte enheder (lille skærm, begrænset bredbånd).
projection Projektor.
print Printforhåndsvisning/printsider.
screen Computerskærm.
tty Telegraffaksimile og lignende medier, der bruger en breddegrads karakterskærm.
tv TV-enheder (lav opløsning, begrænset pagineringsevne).

Værdi

Værdi Beskrivelse
width

Definerer bredden for mål området.

Prefixer "min-" og "max-" kan bruges.

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

Definerer højden for mål området.

Prefixer "min-" og "max-" kan bruges.

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

Definerer bredden for mål skærmen/papiret.

Prefixer "min-" og "max-" kan bruges.

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

Definerer højden for mål skærmen/papiret.

Prefixer "min-" og "max-" kan bruges.

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

Definerer retningen for mål skærmen/papiret.

Mögliche værdier: "portrait" eller "landscape"

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

Definerer bredden/højden for mål området.

Prefixer "min-" og "max-" kan bruges.

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

Definerer ratioet device-width/device-height for mål skærmen/papiret.

Prefixer "min-" og "max-" kan bruges.

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

Definerer antallet af bits for hver farve på mål skærmen.

Prefixer "min-" og "max-" kan bruges.

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

Definerer det mål skærmen kan håndtere af farver.

Prefixer "min-" og "max-" kan bruges.

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

Definerer antallet af bits per pixel i en monokrom framebuffer.

Prefixer "min-" og "max-" kan bruges.

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

Definerer målmonitorens/papirets pixels密度 (dpi eller dpcm).

Prefixer "min-" og "max-" kan bruges.

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

Definerer skanningmetoden for tv-skærmen.

Mögliche værdier er: "progressive" og "interlace".

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

Definerer om uddataudstyr er en grid eller en bitmap.

Mögliche værdier: "1" repræsenterer en grid, "0" er andet.

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

Browserunderstøttelse

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 9.0 15.0 9.1 25.0

HTML <source> etiket