CSS3 สื่อแบบสอบถาม
ประเภทสื่อ CSS2
@media กฎอธิบายไว้ใน CSS2 และสามารถปรับแต่งสำหรับประเภทสื่อที่แตกต่างกันกฎสไตล์ที่แตกต่าง
ตัวอย่างเช่นคุณสามารถตั้งกฎรูปแบบแตกต่างกันสำหรับประเภทสื่อที่แตกต่างกัน (รวมถึงการแสดงอุปกรณ์พกพา, โทรทัศน์ ฯลฯ )
แต่ประเภทนี้สนับสนุนมัลติมีเดียบนอุปกรณ์จำนวนมากยังคงเป็นมิตรมากพอ
CSS3 สื่อแบบสอบถาม
แบบสอบถาม CSS3 มัลติมีเดียสืบทอดความคิด CSS2 ทุกประเภทสื่อ: แทนการหาชนิดของอุปกรณ์, CSS3 ค่าการแสดงผลตามการปรับตัว
คำสั่งสื่อสามารถนำมาใช้ในการตรวจสอบหลายสิ่งหลายอย่างเช่น:
- วิวพอร์ต (Windows) ในความกว้างและความสูง
- ความกว้างและความสูงของอุปกรณ์
- ไปทาง (หน้าจอแนวนอนมาร์ทโฟนหน้าจอแนวตั้ง)
- มติ
ในปัจจุบันหลาย ๆ สำหรับโทรศัพท์แอปเปิ้ลโทรศัพท์ Android แท็บเล็ตและอุปกรณ์อื่น ๆ จะถูกนำมาใช้เพื่อแสดงการค้นหา
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
ไวยากรณ์แบบสอบถามมัลติมีเดีย
สอบถามรายละเอียดเพิ่มเติมมัลติมีเดียประกอบด้วยความหลากหลายของสื่อสามารถมีมากกว่าหนึ่งการแสดงออกการแสดงออกที่จะจัดตั้งขึ้นตามเงื่อนไขผลตอบแทนจริงหรือเท็จ
@media not|only mediatype and (expressions) {
CSS-Code;
}
หากสื่อระบุประเภทการจับคู่ประเภทอุปกรณ์แบบสอบถามส่งกลับจริงเอกสารที่จะแสดงผลของรูปแบบที่กำหนดไว้ในอุปกรณ์ที่ตรงกับ
เว้นแต่คุณจะใช้ไม่เพียง แต่ผู้ประกอบการหรือมิฉะนั้นทุกรูปแบบจะปรับการแสดงผลบนอุปกรณ์ทั้งหมด
ไม่ได้ไม่ได้ถูกนำมาใช้เพื่อยกเว้นอุปกรณ์บางอย่างเช่น @media ไม่พิมพ์ (Non-อุปกรณ์การพิมพ์)
เท่านั้น: การตั้งค่าบางชนิดสื่อพิเศษสนับสนุนสื่อค้นหาโทรศัพท์มือถือถ้ามีเพียงคำหลักเว็บเบราเซอร์สำหรับอุปกรณ์มือถือจะไม่สนใจคำหลักเท่านั้นและหลังจากการประยุกต์ใช้การแสดงออกโดยตรงจากไฟล์รูปแบบ สื่อค้นหาเมื่ออุปกรณ์ไม่สนับสนุนความสามารถในการอ่าน แต่ประเภทสื่อประเภทของเว็บเบราว์เซอร์ของคำหลักที่พบเพียงละเว้นไฟล์รูปแบบนี้
ทั้งหมด: อุปกรณ์ทั้งหมดนี้ควรดู
นอกจากนี้คุณยังสามารถใช้ไฟล์รูปแบบที่แตกต่างกันในสื่อที่แตกต่างกัน
ประเภทสื่อ CSS3
| ความคุ้มค่า | ลักษณะ |
|---|---|
| ทั้งหมด | ใช้สำหรับทุกประเภทของอุปกรณ์มัลติมีเดีย |
| พิมพ์ | สำหรับเครื่องพิมพ์ |
| จอภาพ | สำหรับหน้าจอคอมพิวเตอร์แท็บเล็ตมาร์ทโฟน |
| การพูด | สำหรับผู้อ่านที่หน้าจอ |
ตัวอย่างง่ายๆของการสอบสวนมัลติมีเดีย
การใช้คำสั่งมัลติมีเดียสามารถนำมาใช้แทนรูปแบบเดิมที่สอดคล้องกับรูปแบบบนอุปกรณ์ที่ระบุ
ตัวอย่างต่อไปนี้เปลี่ยนสีพื้นหลังบนหน้าจอที่มองเห็นขนาดของหน้าต่างอุปกรณ์มากกว่า 480 พิกเซล:
ตัวอย่างต่อไปนี้จะมองเห็นได้ในหน้าต่างขนาดหน้าจอขนาดใหญ่กว่า 480 พิกเซลจะลอยไปยังหน้าเมนูด้านซ้าย:
ตัวอย่าง
#leftsidebar {กว้าง: 200px; ลอย: ด้านซ้าย;}
#main {ขอบซ้าย: 216px; }
}
ลอง»
CSS3 อ้างอิง @media
ค้นพบเนื้อหามัลติมีเดียอื่น ๆ สามารถดู @media กฎ