CSS Media Queries
CSS2 แนะนำประเภทสื่อ
กฎ@mediaที่นำมาใช้ใน CSS2 ทำให้สามารถกำหนดกฎของสไตล์ที่แตกต่างกันสำหรับประเภทสื่อต่างๆ
ตัวอย่าง: คุณสามารถมีกฎรูปแบบหนึ่งชุดสำหรับหน้าจอคอมพิวเตอร์ ชุดหนึ่งสำหรับเครื่องพิมพ์ ชุดหนึ่งสำหรับอุปกรณ์พกพา ชุดหนึ่งสำหรับอุปกรณ์ประเภทโทรทัศน์ และอื่นๆ
น่าเสียดายที่สื่อประเภทเหล่านี้ไม่เคยได้รับการสนับสนุนจากอุปกรณ์มากนัก ยกเว้นประเภทสื่อสิ่งพิมพ์
CSS3 แนะนำสื่อแบบสอบถาม
แบบสอบถามสื่อใน CSS3 ขยายแนวคิดประเภทสื่อ CSS2: แทนที่จะมองหาประเภทของอุปกรณ์ พวกเขาดูที่ความสามารถของอุปกรณ์
แบบสอบถามสื่อสามารถใช้เพื่อตรวจสอบสิ่งต่างๆ เช่น:
- ความกว้างและความสูงของวิวพอร์ต
- ความกว้างและความสูงของตัวเครื่อง
- การวางแนว (แท็บเล็ต/โทรศัพท์อยู่ในโหมดแนวนอนหรือแนวตั้งหรือไม่)
- ปณิธาน
การใช้คิวรี่สื่อเป็นเทคนิคยอดนิยมสำหรับการนำเสนอสไตล์ชีตที่ปรับแต่งมาโดยเฉพาะสำหรับเดสก์ท็อป แล็ปท็อป แท็บเล็ต และโทรศัพท์มือถือ (เช่น โทรศัพท์ iPhone และ Android)
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุน@mediaกฎอย่างสมบูรณ์
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
ไวยากรณ์แบบสอบถามสื่อ
คิวรีสื่อประกอบด้วยประเภทสื่อและสามารถมีนิพจน์ได้ตั้งแต่หนึ่งรายการขึ้นไป ซึ่งแก้ไขได้ว่าเป็นจริงหรือเท็จ
@media not|only mediatype and (expressions) {
CSS-Code;
}
ผลลัพธ์ของการสืบค้นจะเป็นจริงหากประเภทสื่อที่ระบุตรงกับประเภทของอุปกรณ์ที่แสดงเอกสาร และนิพจน์ทั้งหมดในแบบสอบถามสื่อเป็นจริง เมื่อคิวรีสื่อเป็นจริง จะใช้สไตล์ชีตหรือกฎของสไตล์ที่สอดคล้องกัน โดยเป็นไปตามกฎการเรียงซ้อนแบบปกติ
เว้นแต่คุณจะใช้โอเปอเรเตอร์ไม่ใช่หรือเพียงเท่านั้น ชนิดสื่อจะเป็นทางเลือกและ
allประเภทจะถูกบอกเป็นนัย
คุณยังสามารถมีสไตล์ชีตที่แตกต่างกันสำหรับสื่อต่างๆ:
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
ประเภทสื่อ CSS3
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
แบบสอบถามสื่อ ตัวอย่างง่ายๆ
วิธีหนึ่งในการใช้คิวรีสื่อคือการมีส่วน CSS สำรองภายในสไตล์ชีตของคุณ
ตัวอย่างต่อไปนี้จะเปลี่ยนสีพื้นหลังเป็นสีเขียวอ่อนหากวิวพอร์ตกว้าง 480 พิกเซลหรือกว้างกว่า (หากวิวพอร์ตน้อยกว่า 480 พิกเซล สีพื้นหลังจะเป็นสีชมพู):
ตัวอย่าง
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
ตัวอย่างต่อไปนี้แสดงเมนูที่จะลอยไปทางด้านซ้ายของหน้าหากวิวพอร์ตกว้าง 480 พิกเซลหรือกว้างกว่า (หากวิวพอร์ตน้อยกว่า 480 พิกเซล เมนูจะอยู่ด้านบนของเนื้อหา):
ตัวอย่าง
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
ตัวอย่างแบบสอบถามสื่อเพิ่มเติม
สำหรับตัวอย่างเพิ่มเติมเกี่ยวกับการสืบค้นสื่อ ไปที่หน้าถัดไป: CSS MQ Examples
CSS @media อ้างอิง
สำหรับภาพรวมของสื่อทุกประเภทและคุณลักษณะ/นิพจน์ โปรดดูที่ กฎ @media ในข้อมูลอ้างอิง CSS ของเรา