属性 media ใน HTML

HTML แบบ <style> รูปแบบ

การกำหนดและการใช้งาน

media ขอบเขตนี้ใช้กำหนดสื่อ/อุปกรณ์ที่สไตล์ CSS มุ่งมั่นเพื่อปรับปรุง

ขอบเขตนี้ใช้กำหนดสไตล์ที่เหมาะสมกับอุปกรณ์ (เช่น iPhone) หรือสื่อเสียงหรือสื่อพิมพ์

คำแนะนำ:ขอบเขตนี้สามารถรับค่าหลายรายการ

ตัวอย่าง

ตัวอย่าง 1

กำหนดสไตล์ที่ใช้สำหรับการพิมพ์

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

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

ตัวอย่าง 2

ใช้คุณสมบัติ width ของคุณสมบัติ media ต่างกันเพื่อแยกสไตล์กลุ่ม

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

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

หมายเหตุ:เมื่อความกว้างของหน้าต่างบราวเซอร์ต่ำกว่า 500 พิกเซล จะใช้สไตล์กลุ่มแรก และเมื่อความกว้างของหน้าต่างบราวเซอร์มากกว่า 500 พิกเซล จะใช้สไตล์กลุ่มที่สอง

การใช้งาน

<style media="value>

ตัวบอกเลขที่เป็นไปได้

ตัวบอกเลข คำอธิบาย
and ตัวบอกเลข AND
not ตัวบอกเลข NOT
, ตัวบอกเลข OR

เงื่อนไขการใช้สไตล์สามารถถูกออกแบบให้ละเอียดอ่อนได้มาก

อุปกรณ์

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

โปรแกรมบราวเซอร์เป็นผู้รับผิดชอบในการอธิบายประเภทอุปกรณ์เครื่องคอมพิวเตอร์ บางประเภทอุปกรณ์ (เช่น screen และ print) มีการอธิบายที่เหมือนกันในหลายบราวเซอร์ แต่บางประเภทอุปกรณ์ (เช่น handheld) อาจมีการอธิบายที่สับสนมากขึ้น ดังนั้น ต้องตรวจสอบว่าการอธิบายของบราวเซอร์ที่เป็นเป้าหมายสำหรับอุปกรณ์เฉพาะที่เราเรียกเรียนเป็นไหมตรงกับความคิดของเรา นั้นมีความสำคัญอย่างยิ่ง

คุณสมบัติ

คุณสมบัติ คำอธิบาย
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

กำหนดอัตราส่วนกว้าง/สูงของอุปกรณ์หน้าจอ/กระดาษ。

สามารถใช้เปลี่ยนแปลงด้วยคำนำหน้า "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

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

อุปกรณ์แบบแนวแนวใช้แนวแนวเรียบร้อยแสดงแสดงเนื้อหา อย่างเช่นเทอร์มินัลฐานภาพและโทรศัพท์เคลื่อนที่ที่แสดงเนื้อหาแบบเดียว

ค่าที่สนับสนุนมี 0 และ 1 (1 ตัวแทนอุปกรณ์แบบแนวแนว)

คุณสมบัตินี้ไม่มี限定词

เช่น：media="handheld and (grid:1)"

คุณสมบัติเช่น width มักจะถูกใช้พร้อมกับ限定词 min และ max โดยไม่มี限定词 สไตล์ก็สามารถใช้เพื่อขนานเส้นกว้างของหน้าต่างเว็บไซต์อย่างแม่นยำ แต่การเพิ่ม限定词ทำให้เงื่อนไขกลับมีความยอมรับมากขึ้น

ตารางข้างต้นระบุและนำเสนอคุณสมบัติที่สามารถใช้งานได้ทั้งหมด หากไม่ได้ระบุชัดเจน คุณสมบัติเหล่านี้สามารถใช้งานด้วย prefix min- และ max- ที่สร้างค่าของขอบเขต ไม่ใช่ค่าที่เป็นจริง

เช่นเดียวกับสถานการณ์ของอุปกรณ์ที่กำหนดไว้ คุณสมบัติเหล่านี้ก็อาจถูกอธิบายโดยเบราเซอร์ โดยเรียงตามความรู้เข้าใจของเบราเซอร์ และความเป็นไปได้ที่จะมีคุณสมบัตินี้อยู่และสามารถใช้งานได้ มีหลายหลายประเด็น หากต้องการใช้งานสไตล์เพื่อคุณสมบัติเหล่านี้ กรุณาทดสอบอย่างเต็มที่ และเตรียมรูปแบบสไตล์ที่เป็นการเลือกทางอีกทางหนึ่งเมื่อคุณสมบัติไม่สามารถใช้งานได้

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

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

HTML แบบ <style> รูปแบบ