คุณสมบัติ media ของ HTML <source>

HTML แบบแฟ้ม <source>

การใช้งานและการประกาศ

media คุณสมบัตินี้รับทุกขอบเขตของคำถามมีเอเทอร์เน็ตที่ปกติและถูกกำหนดใน CSS

แจ้งเตือน：คุณสมบัตินี้สามารถรับค่าหลายอย่างได้

ตัวอย่าง

โปรแกรมที่มีสองแหล่งข้อมูลและภาพกลับของแบบ <picture> ไอเอม:

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

ทดลองด้วยตัวเอง

วิธีการใช้

<source media="media_query>

สัญญาณที่เป็นไปได้

สัญญาณ รายละเอียด
and กำหนดสัญญาณ AND
not กำหนดสัญญาณ NOT
, กำหนดสัญญาณ OR

อุปกรณ์

ค่า รายละเอียด
all ค่าเริ่มต้น สมนางกับทุกอุปกรณ์
aural เครื่องสร้างเสียง
braille อุปกรณ์กลับแสงเปลือกขาว
handheld อุปกรณ์ที่เป็นมือถือ (หน้าจอเล็ก และพื้นที่ใช้งานจำกัด)
projection เครื่องภาพยนตร์
print โหมดแสดงหน้าตัวละครก่อนการพิมพ์/หน้าตัวละครที่พิมพ์
screen หน้าจอคอมพิวเตอร์
tty เครื่องติดต่อโทรศัพท์ และสื่อที่ใช้มิติตัวอักษรตรงข้าม
tv อุปกรณ์ประเภทโทรทัศน์ (ตัวละครที่มีลูกเล่นต่ำ และความสามารถแสดงหน้าตัวเล็ก)

ค่า

ค่า รายละเอียด
width

กำหนดความกว้างของพื้นที่ที่จอปรึกษา

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

ตัวอย่าง: media="screen and (min-width:500px)"
height

กำหนดความสูงของพื้นที่ที่จอปรึกษา

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

ตัวอย่าง: media="screen and (max-height:700px)"
device-width

กำหนดความกว้างของจอปรึกษา/กระดาษ

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

ตัวอย่าง: media="screen and (device-width:500px)"
device-height

กำหนดความสูงของจอปรึกษา/กระดาษ

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

ตัวอย่าง: media="screen and (device-height:500px)"
orientation

กำหนดทิศทางของจอปรึกษา/กระดาษ

ค่าที่เป็นไปได้: "portrait" หรือ "landscape"

ตัวอย่าง: media="all and (orientation: landscape)"
aspect-ratio

กำหนดอัตราส่วนกว้าง/สูงของพื้นที่ที่จอปรึกษา

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

ตัวอย่าง: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

กำหนดอัตราส่วน device-width/device-height ของจอปรึกษา/กระดาษ

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

ตัวอย่าง: media="screen and (aspect-ratio:16/9)"
color

กำหนดจำนวนบิตของสีที่จอปรึกษา

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

ตัวอย่าง: media="screen and (color:3)"
color-index

กำหนดจำนวนสีที่จอปรึกษาสามารถจัดการได้

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

ตัวอย่าง: 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>