แบบสอบถาม @media CSS3
ตัวอย่าง
ถ้าเอกสารมีความกว้างน้อยกว่า 300 พิกเซลคือการปรับเปลี่ยนการนำเสนอพื้นหลัง (สีพื้น):
หน้าจอ @media และ (ความกว้างสูงสุด: 300px) {
ร่างกาย {
สีพื้นหลัง: lightblue;
}
}
ร่างกาย {
สีพื้นหลัง: lightblue;
}
}
ลอง»
ความหมายและการใช้งาน
ใช้คำสั่ง @media คุณสามารถกำหนดรูปแบบที่แตกต่างกันสำหรับประเภทสื่อที่แตกต่างกัน
@media สามารถตั้งค่าสำหรับหน้าจอที่แตกต่างกันขนาดรูปแบบต่าง ๆ โดยเฉพาะอย่างยิ่งถ้าคุณต้องตั้งหน้าตอบสนองการออกแบบสื่อ @ เป็นประโยชน์อย่างมาก
เมื่อคุณตั้งค่าเบราว์เซอร์ขนาดของกระบวนการที่หน้าจะได้รับการแสดงผลหน้าเว็บที่อยู่บนพื้นฐานของความกว้างและความสูงของเบราว์เซอร์
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุ @media สนับสนุนกฎหมายเลขรุ่นเบราเซอร์แรก
กฎ | |||||
---|---|---|---|---|---|
@media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS ไวยากรณ์
@media mediatype และ | ไม่ | เท่านั้น (คุณลักษณะสื่อ) {
CSS-Code;
}
CSS-Code;
}
นอกจากนี้คุณยังสามารถใช้สไตล์ชีตที่แตกต่างกันสำหรับสื่อที่แตกต่างกัน
<link rel = "สไตล์ชีต" สื่อ = "mediatype และ | ไม่ | เท่านั้น (คุณลักษณะสื่อ)" href = "myStyleSheet.css">
ประเภทสื่อ
ความคุ้มค่า | ลักษณะ |
---|---|
ทั้งหมด | สำหรับอุปกรณ์ทั้งหมด |
เกี่ยวกับหู | ล้าสมัย สำหรับการพูดและการสังเคราะห์เสียง |
อักษรเบรลล์ | ล้าสมัย อุปกรณ์อักษรเบรลล์ที่ใช้ในการสัมผัสความคิดเห็น |
นูน | ล้าสมัย อุปกรณ์การพิมพ์ตาบอดสำหรับการพิมพ์ |
ที่มีด้ามจับ | ล้าสมัย สำหรับอุปกรณ์มือถือหรืออุปกรณ์ที่มีขนาดเล็กเช่น PDA และโทรศัพท์ขนาดเล็ก |
พิมพ์ | สำหรับเครื่องพิมพ์และตัวอย่างก่อนพิมพ์ |
ติ่ง | ล้าสมัย สำหรับอุปกรณ์การฉาย |
จอภาพ | สำหรับหน้าจอคอมพิวเตอร์พีซีแท็บเล็ตมาร์ทโฟนและชอบ |
การพูด | นำไปใช้กับโปรแกรมอ่านหน้าจอและอุปกรณ์เสียงอื่น ๆ |
TTY | ล้าสมัย สำหรับการแก้ไขตารางตัวอักษรเช่นโทรเลขอุปกรณ์ปลายทางและตัวอักษรที่ จำกัด ของอุปกรณ์พกพา |
โทรทัศน์ | ล้าสมัย สำหรับทีวีและทีวีบนเว็บ |
คุณสมบัติสื่อ
ความคุ้มค่า | ลักษณะ |
---|---|
อัตราส่วน | กำหนดอุปกรณ์การส่งออกในภูมิภาคที่มองเห็นความกว้างของหน้าอัตราส่วนความสูง |
สี | กำหนดอุปกรณ์การส่งออกในแต่ละกลุ่มจำนวนเดิมสี ถ้ามันไม่ได้เป็นอุปกรณ์สีค่าเท่ากับ 0 |
สีดัชนี | จำนวนของรายการในตารางมองขึ้นสีถูกกำหนดไว้ในอุปกรณ์แสดงผล ถ้าคุณไม่ได้ใช้ตารางการค้นหาสีค่าเท่ากับ 0 |
อุปกรณ์อัตราส่วน | อุปกรณ์แสดงผลความละเอียดหน้าจอกว้างที่มองเห็นได้อัตราส่วนความสูง |
อุปกรณ์ที่มีความสูง | อุปกรณ์แสดงผลหน้าจอความละเอียดสูงสามารถมองเห็นได้ |
อุปกรณ์ที่มีความกว้าง | อุปกรณ์แสดงผลความละเอียดหน้าจอกว้างที่มองเห็นได้ |
ตะแกรง | อุปกรณ์ส่งออกที่ใช้ในการค้นหาว่าตารางหรือตาข่าย |
ความสูง | กำหนดอุปกรณ์การส่งออกในภูมิภาคที่มองเห็นได้ของความสูงของหน้า |
Max-อัตราส่วน | อุปกรณ์แสดงผลความละเอียดหน้าจออัตราส่วนสูงสุดที่มองเห็นของความกว้างความสูง |
แม็กซ์สี | กำหนดจำนวนสูงสุดของอุปกรณ์ส่งออกชุดของเดิมแต่ละสี |
แม็กซ์สีดัชนี | จำนวนสูงสุดของรายการในตารางมองขึ้นสีจะถูกกำหนดไว้ในอุปกรณ์แสดงผล |
Max-อุปกรณ์อัตราส่วน | อุปกรณ์แสดงผลความละเอียดหน้าจออัตราส่วนสูงสุดที่มองเห็นของความกว้างความสูง |
แม็กซ์อุปกรณ์ที่มีความสูง | หน้าจอกำหนดอุปกรณ์ส่งออกมองเห็นได้ด้วยความสูงสูงสุด |
แม็กซ์อุปกรณ์ที่มีความกว้าง | อุปกรณ์แสดงผลความละเอียดหน้าจอกว้างที่มองเห็นได้สูงสุด |
แม็กซ์ความสูง | กำหนดอุปกรณ์การส่งออกในภูมิภาคมองเห็นได้จากความสูงสูงสุดของหน้า |
Max-ขาวดำ | ถูกกำหนดให้อยู่ในกรอบขาวดำบัฟเฟอร์มีต่อพิกเซลเป็นจำนวนสูงสุดของขาวดำเดิม |
แม็กซ์ความละเอียด | ความละเอียดสูงสุดที่กำหนดอุปกรณ์ |
ความกว้างสูงสุด | กำหนดอุปกรณ์การส่งออกในภูมิภาคที่มองเห็นได้กว้างสูงสุดของหน้า |
นาทีอัตราส่วน | กำหนดอุปกรณ์แสดงผลในพื้นที่ของหน้าอัตราส่วนขั้นต่ำที่มองเห็นของความกว้างความสูง |
นาทีสี | กำหนดอุปกรณ์แสดงผลแต่ละจำนวนขั้นต่ำที่กำหนดเดิมสี |
นาทีสีดัชนี | จำนวนขั้นต่ำของรายการในตารางมองขึ้นสีจะถูกกำหนดไว้ในอุปกรณ์แสดงผล |
นาทีอุปกรณ์อัตราส่วน | หน้าจอกำหนดอัตราส่วนขั้นต่ำอุปกรณ์ส่งออกที่มองเห็นของความกว้างความสูง |
นาทีความกว้างของอุปกรณ์ | อุปกรณ์ส่งออกหน้าจอกำหนดความกว้างที่มองเห็นได้ขั้นต่ำ |
นาทีอุปกรณ์ที่มีความสูง | ขั้นต่ำที่กำหนดหน้าจอสูงมองเห็นอุปกรณ์ส่งออกของ |
นาทีความสูง | กำหนดอุปกรณ์การส่งออกในภูมิภาคมองเห็นได้จากความสูงต่ำสุดของหน้า |
นาทีขาวดำ | จำนวนขั้นต่ำของต้นฉบับสีจะถูกกำหนดไว้ในเฟรมบัฟเฟอร์ขาวดำมีต่อพิกเซล |
นาทีความละเอียด | ความละเอียดขั้นต่ำกำหนดอุปกรณ์ |
นาทีความกว้าง | กำหนดอุปกรณ์การส่งออกในภูมิภาคที่มองเห็นได้ของความกว้างต่ำสุดของหน้า |
ขาวดำ | ถูกกำหนดไว้ในบัฟเฟอร์แบบขาวดำมีต่อพิกเซลขาวดำจำนวนเดิม ถ้ามันไม่ได้เป็นอุปกรณ์ขาวดำค่าเท่ากับ 0 |
ปฐมนิเทศ | กำหนดอุปกรณ์การส่งออกในภูมิภาคที่มองเห็นได้ของความสูงของหน้ามีค่ามากกว่าหรือเท่ากับความกว้าง |
ความละเอียด | กำหนดความละเอียดของอุปกรณ์ เช่น: 96dpi, 300dpi, 118dpcm |
การสแกน | ขั้นตอนการสแกนประเภทโทรทัศน์ความละเอียดของอุปกรณ์ |
ความกว้าง | กำหนดอุปกรณ์การส่งออกในภูมิภาคที่มองเห็นความกว้างของหน้า |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ใช้คำสั่ง @media เพื่อสร้างการออกแบบที่ตอบสนองต่อ:
@media เพียงหน้าจอและ (ความกว้างสูงสุด : 500px) {
.gridmenu {
ความกว้าง: 100%;
}
.gridmain {
ความกว้าง: 100%;
}
.gridright {
ความกว้าง: 100%;
}
}
.gridmenu {
ความกว้าง: 100%;
}
.gridmain {
ความกว้าง: 100%;
}
.gridright {
ความกว้าง: 100%;
}
}
ลอง»
หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS: CSS ประเภทสื่อ