ตัวอย่าง
เปลี่ยนพื้นหลังสีถ้าวิวพอร์ตเป็น 480 พิกเซลกว้างหรือกว้าง:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
กฎ @media ที่ใช้ในการกำหนดกฎรูปแบบที่แตกต่างกันสำหรับสื่อประเภท / อุปกรณ์ที่แตกต่างกัน
ใน CSS2 นี้ถูกเรียกว่าชนิดของสื่อในขณะที่ใน CSS3 จะเรียกว่าคำสั่งสื่อ
คำสั่งสื่อดูที่ความสามารถของอุปกรณ์ที่สามารถนำมาใช้ในการตรวจสอบหลายสิ่งหลายอย่างเช่น:
- ความกว้างและความสูงของวิวพอร์ต
- ความกว้างและความสูงของอุปกรณ์
- การปฐมนิเทศ (is the tablet/phone in landscape or portrait mode?)
- ความละเอียด
- และอื่น ๆ อีกมากมาย
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่กฎ @media
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS ไวยากรณ์
@media not|onlymediatype and (media feature){
CSS-Code;
}นอกจากนี้คุณยังสามารถมีสไตล์ชีตที่แตกต่างกันสำหรับสื่อที่แตกต่างกัน
<link rel="stylesheet" media=" mediatype and|not|only ( media
feature )"
href=" mystylesheet.css ">ประเภทสื่อ
| ความคุ้มค่า | ลักษณะ |
|---|---|
| all | ใช้สำหรับทุกชนิดของสื่ออุปกรณ์ |
| aural | เลิกใช้ ที่ใช้ในการพูดและการสังเคราะห์เสียง |
| braille | เลิกใช้ ใช้สำหรับอุปกรณ์สัมผัสความคิดเห็นอักษรเบรลล์ |
| embossed | เลิกใช้ ใช้สำหรับเครื่องพิมพ์อักษรเบรลล์เพจ |
| handheld | เลิกใช้ ใช้สำหรับอุปกรณ์ขนาดเล็กหรือมือถือ |
| ใช้สำหรับเครื่องพิมพ์ | |
| projection | เลิกใช้ ใช้สำหรับการนำเสนอที่คาดการณ์เช่นภาพนิ่ง |
| screen | ใช้สำหรับหน้าจอคอมพิวเตอร์แท็บเล็ตสมาร์ทโทรศัพท์ ฯลฯ |
| speech | ใช้สำหรับอ่านหน้าจอว่า "reads" หน้าออกมาดัง ๆ |
| tty | เลิกใช้ ใช้สำหรับสื่อที่ใช้คงที่สนามตารางตัวอักษรเช่น teletypes และอาคาร |
| tv | เลิกใช้ ใช้สำหรับอุปกรณ์โทรทัศน์ประเภท |
คุณสมบัติสื่อ
| ความคุ้มค่า | ลักษณะ |
|---|---|
| aspect-ratio | อัตราส่วนระหว่างความกว้างและความสูงของวิวพอร์ต |
| color | จำนวนบิตต่อองค์ประกอบสีสำหรับอุปกรณ์เอาท์พุท |
| color-index | จำนวนของสีอุปกรณ์ที่สามารถแสดง |
| device-aspect-ratio | อัตราส่วนระหว่างความกว้างและความสูงของอุปกรณ์ |
| device-height | ความสูงของอุปกรณ์เช่นหน้าจอคอมพิวเตอร์ |
| device-width | ความกว้างของอุปกรณ์เช่นหน้าจอคอมพิวเตอร์ |
| grid | ไม่ว่าจะเป็นอุปกรณ์ที่มีตารางหรือบิตแมป |
| height | ความสูงวิวพอร์ต |
| max-aspect-ratio | อัตราส่วนสูงสุดระหว่างความกว้างและความสูงของพื้นที่แสดงผล |
| max-color | จำนวนสูงสุดของบิตต่อองค์ประกอบสีสำหรับอุปกรณ์เอาท์พุท |
| max-color-index | จำนวนสูงสุดของสีอุปกรณ์ที่สามารถแสดง |
| max-device-aspect-ratio | อัตราส่วนสูงสุดระหว่างกว้างและความสูงของอุปกรณ์ |
| max-device-height | ความสูงสูงสุดของอุปกรณ์เช่นหน้าจอคอมพิวเตอร์ |
| max-device-width | ความกว้างสูงสุดของอุปกรณ์เช่นหน้าจอคอมพิวเตอร์ |
| max-height | ความสูงสูงสุดของพื้นที่แสดงผลเช่นหน้าต่างเบราว์เซอร์ |
| max-monochrome | จำนวนสูงสุดของบิตต่อ "color" ในขาวดำ (greyscale) อุปกรณ์ |
| max-resolution | ความละเอียดสูงสุดของอุปกรณ์ที่ใช้ dpi หรือ DPCM |
| max-width | ความกว้างสูงสุดของพื้นที่แสดงผลเช่นหน้าต่างเบราว์เซอร์ |
| min-aspect-ratio | อัตราส่วนน้อยที่สุดระหว่างความกว้างและความสูงของพื้นที่แสดงผล |
| min-color | จำนวนขั้นต่ำของบิตต่อองค์ประกอบสีสำหรับอุปกรณ์เอาท์พุท |
| min-color-index | จำนวนขั้นต่ำของสีอุปกรณ์ที่สามารถแสดง |
| min-device-aspect-ratio | อัตราส่วนขั้นต่ำระหว่างกว้างและความสูงของอุปกรณ์ |
| min-device-width | ความกว้างต่ำสุดของอุปกรณ์เช่นหน้าจอคอมพิวเตอร์ |
| min-device-height | ความสูงขั้นต่ำของอุปกรณ์เช่นหน้าจอคอมพิวเตอร์ |
| min-height | ความสูงขั้นต่ำของพื้นที่แสดงผลเช่นหน้าต่างเบราว์เซอร์ |
| min-monochrome | จำนวนขั้นต่ำของบิตต่อ "color" ในขาวดำ (greyscale) อุปกรณ์ |
| min-resolution | ความละเอียดขั้นต่ำของอุปกรณ์ที่ใช้ dpi หรือ DPCM |
| min-width | ความกว้างต่ำสุดของพื้นที่แสดงผลเช่นหน้าต่างเบราว์เซอร์ |
| monochrome | จำนวนบิตต่อ "color" ในขาวดำ (greyscale) อุปกรณ์ |
| orientation | การวางแนวของวิวพอร์ต (landscape or portrait mode) |
| overflow-block | อย่างไรเนื้อหาจับอุปกรณ์ส่งออกที่ล้นวิวพอร์ตตามแกนบล็อก (added in Media Queries Level 4) |
| overflow-inline | สามารถเนื้อหาที่ล้นวิวพอร์ตตามแนวแกนแบบอินไลน์เลื่อน (added in Media Queries Level 4) |
| resolution | ความละเอียดของอุปกรณ์แสดงผลโดยใช้ dpi หรือ DPCM |
| scan | ขั้นตอนการสแกนของอุปกรณ์แสดงผล |
| update-frequency | วิธีการอย่างรวดเร็วอุปกรณ์แสดงผลสามารถปรับเปลี่ยนลักษณะของเนื้อหา (added in Media Queries Level 4) |
| width | ความกว้างวิวพอร์ต |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ใช้กฎ @media ที่จะทำให้การออกแบบที่ตอบสนอง:
@media only screen and (max-width: 500px) {
.gridmenu
{
width:100%;
}
.gridmain
{
width:100%;
}
.gridright {
width:100%;
}
}
ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS: CSS สื่อแบบสอบถาม