CSS2 แนะนำประเภทสื่อ
@media กฎแนะนำใน CSS2 ทำให้มันเป็นไปได้ที่จะกำหนดกฎรูปแบบที่แตกต่างกันสำหรับประเภทสื่อที่แตกต่างกัน
ตัวอย่าง: คุณอาจมีหนึ่งชุดของกฎสไตล์สำหรับหน้าจอคอมพิวเตอร์หนึ่งสำหรับเครื่องพิมพ์หนึ่งสำหรับอุปกรณ์มือถือหนึ่งสำหรับอุปกรณ์โทรทัศน์ชนิดและอื่น ๆ
แต่น่าเสียดายที่เหล่านี้ชนิดของสื่อที่ไม่เคยได้รับเป็นจำนวนมากของการสนับสนุนโดยอุปกรณ์อื่น ๆ นอกเหนือจากการพิมพ์ประเภทสื่อ
CSS3 เปิดตัวสื่อแบบสอบถาม
คำสั่งสื่อใน CSS3 ขยายความคิดสื่อ CSS2 ประเภท: แทนที่จะมองหาชนิดของอุปกรณ์ที่พวกเขามองไปที่ความสามารถของอุปกรณ์
คำสั่งสื่อสามารถนำมาใช้ในการตรวจสอบหลายสิ่งหลายอย่างเช่น:
- ความกว้างและความสูงของวิวพอร์ต
- ความกว้างและความสูงของอุปกรณ์
- การปฐมนิเทศ (เป็นแท็บเล็ต / โทรศัพท์ในแนวนอนหรือแนวตั้ง?)
- ความละเอียด
การใช้คำสั่งสื่อนี้เป็นเทคนิคที่นิยมสำหรับการส่งมอบแผ่นสไตล์ที่เหมาะกับแท็บเล็ต, iPhone, และหุ่นยนต์
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่กฎ @media
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
สื่อแบบสอบถามไวยากรณ์
แบบสอบถามสื่อประกอบด้วยประเภทของสื่อและสามารถมีมากกว่าหนึ่งการแสดงออกซึ่งมีมติให้จริงหรือเท็จ
@media not|onlymediatype and (expressions) {
CSS-Code;
}ผลของแบบสอบถามเป็นจริงถ้าชนิดของสื่อที่ระบุตรงกับประเภทของอุปกรณ์ที่เอกสารจะถูกแสดงบนและสำนวนทั้งหมดในแบบสอบถามสื่อเป็นจริง เมื่อแบบสอบถามสื่อเป็นความจริงที่สอดคล้องกันแผ่นลักษณะหรือรูปแบบใช้กฎตามกฎ Cascading ปกติ
เว้นแต่คุณจะใช้ไม่ได้หรือเฉพาะผู้ประกอบการประเภทของสื่อที่จะเป็นตัวเลือกและ all ประเภทจะได้รับโดยนัย
นอกจากนี้คุณยังสามารถมีสไตล์ชีตที่แตกต่างกันสำหรับสื่อที่แตกต่างกัน
<link rel="stylesheet" media=" mediatype and|not|only ( expressions )"
href=" print.css ">ประเภทสื่อ CSS3
| ความคุ้มค่า | ลักษณะ |
|---|---|
| all | ใช้สำหรับทุกชนิดของสื่ออุปกรณ์ |
| ใช้สำหรับเครื่องพิมพ์ | |
| screen | ใช้สำหรับหน้าจอคอมพิวเตอร์แท็บเล็ตสมาร์ทโทรศัพท์ ฯลฯ |
| speech | ใช้สำหรับอ่านหน้าจอว่า "การอ่าน" หน้าออกมาดัง ๆ |
สื่อแบบสอบถามตัวอย่างง่ายๆ
วิธีหนึ่งที่จะใช้คำสั่งสื่อคือการมีส่วน CSS สลับขวาภายในแผ่นสไตล์ของคุณ
ตัวอย่างต่อไปนี้การเปลี่ยนแปลง background-color เพื่อ LightGreen ถ้าวิวพอร์ตเป็น 480 พิกเซลกว้างหรือกว้าง (ถ้าวิวพอร์ตน้อยกว่า 480 พิกเซล background-color จะเป็นสีชมพู):
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงเมนูที่จะลอยไปทางซ้ายของหน้าถ้าวิวพอร์ตเป็น 480 พิกเซลกว้างหรือกว้าง (ถ้าวิวพอร์ตน้อยกว่า 480 พิกเซลเมนูจะอยู่ด้านบนของเนื้อหา):
ตัวอย่าง
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left:216px;}
}
ลองตัวเอง» CSS3 @media อ้างอิง
สำหรับภาพรวมทั้งหมดของสื่อทุกประเภทและคุณสมบัติ / นิพจน์โปรดดูที่ @media กฎในการอ้างอิง CSS ของเรา