HTML <source> media attribute

HTML <source> 标籤

Paglilinaw at paggamit

media Ang katangian ay tumatanggap ng anumang pinapayagan na media query na ginagamit sa CSS.

Babala:Ang katangian na ito ay maaaring tanggapin maraming halaga.

Mga halimbawa

Isang elementong <picture> na naglalaman ng dalawang laman ng kagamitan at isang backup na larawan:

<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>

Subukan ang iyong sarili

Syntax

<source media="media_query>

Mga posibleng operator

Operator Paglalarawan
and Tinutukoy ang operator na AND.
not Tinutukoy ang operator na NOT.
, Tinutukoy ang operator na OR.

Device

Halaga Paglalarawan
all Default. Magiging magagamit sa lahat ng aparato.
aural Voice synthesizer.
braille Braille feedback device.
handheld Handheld devices (small screen, limited bandwidth).
projection Projector.
print Print preview mode/print page.
screen Computer screen.
tty Telegraph typewriter at kahit anong likas na medium na gumagamit ng grid ng pantay na karakter.
tv Mga telebisyon na aparato (mababang resolucion, limitadong kakayahang pahina).

Halaga

Halaga Paglalarawan
width

Tinutukoy ang lapad ng layunin na display area.

สามารถใช้คำนำหน้า "min-" และ "max-"

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

Tinutukoy ang taas ng layunin na display area.

สามารถใช้คำนำหน้า "min-" และ "max-"

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

Tinutukoy ang lapad ng layunin na monitor/papag.

สามารถใช้คำนำหน้า "min-" และ "max-"

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

Tinutukoy ang taas ng layunin na monitor/papag.

สามารถใช้คำนำหน้า "min-" และ "max-"

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

Tinutukoy ang direksyon ng layunin na monitor/papag.

Mga posibleng halaga: "portrait" o "landscape"

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

Tinutukoy ang raportong lebel at taas ng layunin na display area.

สามารถใช้คำนำหน้า "min-" และ "max-"

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

Tinutukoy ang raportong device-width/device-height ng layunin na monitor/papag.

สามารถใช้คำนำหน้า "min-" และ "max-"

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

Tinutukoy ang bilang ng bit ng bawat kulay ng layunin na monitor.

สามารถใช้คำนำหน้า "min-" และ "max-"

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

Tinutukoy ang bilang ng kulay na maaaring hawakan ng layunin na monitor.

สามารถใช้คำนำหน้า "min-" และ "max-"

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

กำหนดบิตต่อพิกเซลในหน้าจอหน้าตัวเดียว

สามารถใช้คำนำหน้า "min-" และ "max-"

ตัวอย่าง: media="screen and (monochrome:2)"
resolution

กำหนดความหนาแน่นของจอ/กระดาษเป้าหมาย (dpi หรือ dpcm)

สามารถใช้คำนำหน้า "min-" และ "max-"

ตัวอย่าง: media="print and (resolution:300dpi)"
scan

กำหนดวิธีสแกนของจอแสดงทีวี

ค่าที่เป็นไปได้คือ: "progressive" และ "interlace"

ตัวอย่าง: media="tv and (scan:interlace)"
grid

กำหนดอุปกรณ์ออกที่เป็นแนวเนติหรือบิตแมบ

ค่าที่เป็นไปได้: "1" แสดงถึงแนวเนติ, "0" คืออื่นๆ

ตัวอย่าง: media="handheld and (grid:1)"

การสนับสนุนเบราเซอร์

ตัวเลขในตารางนี้ระบุตอนที่เบราเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่

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

HTML <source> 标籤