บทช่วยสอน ประเภทสื่อ CSS ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ประเภทสื่อ,กฎ @media,สื่อประเภทอื่น ๆ,
ประเภทสื่อช่วยให้คุณสามารถระบุได้ว่าเอกสารที่จะนำเสนอในสื่อที่แตกต่างกัน ไฟล์ที่สามารถแสดงผลในรูปแบบที่แตกต่างกันบนหน้าจอบนกระดาษหรือเบราว์เซอร์ได้ยิน ฯลฯ
บางคุณสมบัติ CSS ถูกออกแบบมาเพียงบางส่วนของสื่อ เช่น "เสียงของครอบครัว" คุณสมบัติที่ถูกออกแบบมาสำหรับตัวแทนผู้ใช้เกี่ยวกับหู บางคุณสมบัติอื่น ๆ ที่สามารถใช้สำหรับประเภทสื่อที่แตกต่าง ยกตัวอย่างเช่น "font-size" ทรัพย์สินสามารถนำมาใช้ไปยังหน้าจอและพิมพ์สื่อ แต่มีค่าที่แตกต่างกัน หน้าจอและแฟ้มกระดาษแตกต่างกันมักจะต้องใช้ตัวอักษรขนาดใหญ่ซอง - ตัวอักษร serif เหมาะสำหรับอ่านบนหน้าจอในขณะที่แบบอักษร serif จะง่ายต่อการอ่านบนกระดาษ
กฎ @media ช่วยให้แผ่นลักษณะเดียวกันสำหรับสื่อที่แตกต่างกันกำหนดรูปแบบที่แตกต่างกัน
ในตัวอย่างต่อไปบอกให้เราแสดง 14 พิกเซล Verdana รูปแบบตัวอักษรบนหน้าจอเบราว์เซอร์ แต่ถ้าหน้าพิมพ์จะมี 10 พิกเซลตัวอักษรไทม์ โปรดทราบกระดาษ font-weight และการตั้งค่าหน้าจอที่เป็นตัวหนา:
<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>
<body>
thth
</body>
</html>
คุณสามารถลองด้วยตัวคุณเองและดูถ้าคุณกำลังใช้ Mozilla / Firefox หรือ IE5 + พิมพ์หน้านี้คุณจะเห็น "ประเภทสื่อ" จะใช้จอแสดงผลอีกกว่าขนาดตัวอักษรข้อความอื่น ๆ จุดเล็ก ๆ
หมายเหตุ: ชื่อชนิดของสื่อที่ไม่ได้เป็นกรณีที่สำคัญ
| ประเภทสื่อ | ลักษณะ |
|---|---|
| ทั้งหมด | สำหรับอุปกรณ์สื่อทั้งหมด |
| เกี่ยวกับหู | สำหรับการพูดและการสังเคราะห์เสียง |
| อักษรเบรลล์ | พร้อมกับอุปกรณ์ความคิดเห็นสัมผัสสำหรับคนตาบอดอักษรเบรลล์ |
| นูน | สำหรับคนตาบอดเพจเครื่องพิมพ์อักษรเบรลล์ |
| ที่มีด้ามจับ | สำหรับอุปกรณ์พกพาขนาดเล็ก |
| พิมพ์ | สำหรับเครื่องพิมพ์ |
| ติ่ง | โปรแกรมสำหรับการแสดงผลเช่นภาพนิ่ง |
| จอภาพ | สำหรับจอคอมพิวเตอร์ |
| TTY | สำหรับการใช้ตารางคงที่ของตัวอักษรสื่อความหนาแน่นเช่น teletypes และอาคาร |
| โทรทัศน์ | สำหรับประเภทของอุปกรณ์ทีวี |