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

HTML <link> แบบ

คำนิยามและวิธีใช้

media คุณสมบัติกำหนดที่จะปรับปรุงทรัพยากรปลายทางสำหรับสื่อ/อุปกรณ์ใด

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

คุณสมบัตินี้ใช้กับตารางสไตล์ CSS มากที่สุดเพื่อกำหนดสไตล์ต่างกันสำหรับสื่อที่แยกต่างกัน

media คุณสมบัติสามารถรับมากกว่าหนึ่งรายการค่าได้

ตัวอย่าง

สไตล์ที่แยกต่างกันสองรูปแบบสำหรับสื่อที่แยกต่างกัน (หน้าจอและการพิมพ์):

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

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

ภาษาเข้าใจ

<link media="ค่า>

ประกาศที่เป็นไปได้

ประกาศ คำอธิบาย
and กำหนดการคำนวณ AND
not กำหนดการคำนวณ NOT
, กำหนดการคำนวณ OR

อุปกรณ์

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

ค่า

ค่า คำอธิบาย
aspect-ratio

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

สามารถใช้คำหน้า "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)"
device-aspect-ratio ละทิ้งการใช้งานแล้วกำหนดอัตราส่วน device-width/device-height ของจอแสดงหรือกระดาษปริ้น
device-width ละทิ้งการใช้งานแล้วกำหนดความกว้างของจอแสดงหรือกระดาษปริ้น
device-height ละทิ้งการใช้งานแล้วกำหนดความสูงของจอแสดงหรือกระดาษปริ้น
grid

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

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

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

กำหนดความสูงของพื้นที่แสดงหน้าที่ตั้งตารง

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

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

กำหนดบิตของแต่ละพิกเซลในหน่วยความเป็นเอกสารเดียวที่มีสีเดียว

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

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

กำหนดทิศทางของหน้าจอ/กระดาษเป้าหมาย

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

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

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

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

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

กำหนดวิธีการสแกนของหน้าจอ TV

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

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

กำหนดความกว้างของพื้นที่แสดงเป้าหมาย

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

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน

HTML <link> แบบ