ทำความเข้าใจ CSS Media Types และ Queries

CSS Media Types and Queries ช่วยให้ผู้ใช้กำหนดรูปแบบบางอย่างตามประเภททั่วไปของอุปกรณ์ (หน้าจอ การพิมพ์ ฯลฯ) หรือลักษณะของอุปกรณ์ (ความละเอียดหน้าจอ ขนาดวิวพอร์ต ฯลฯ)

ไวยากรณ์

ต่อไปนี้เป็นรูปแบบการสืบค้นสื่อ -

@media ไม่ใช่ | เฉพาะประเภทสื่อและ (นิพจน์) { CSS-Code;}

ในที่นี้ จะใช้การสืบค้นสื่อหาก −

• ประเภทสื่อตรงกับประเภทอุปกรณ์ที่แสดงผลเอกสาร
• ไม่ได้กำหนดโอเปอเรเตอร์ไม่ใช่/เท่านั้น จากนั้นเคียวรีสื่อจะนำไปใช้กับประเภทสื่อทั้งหมด
• มีการระบุโอเปอเรเตอร์ไม่ใช่/เท่านั้น จากนั้นเคียวรีสื่อจะไม่ใช้/เฉพาะกับสื่อบางประเภทตามลำดับ

ผู้ใช้สามารถมีสไตล์ชีตที่แตกต่างกันซึ่งสอดคล้องกับสื่อต่างๆ ตัวอย่างเช่น ผู้ใช้สามารถมีสไตล์ชีตที่แตกต่างกันสำหรับสื่อสิ่งพิมพ์และสื่อหน้าจอ

และ,

ต่อไปนี้เป็นประเภทสื่อที่ระบุไว้ใน CSS3 -

ต่อไปนี้เป็นวิธีการสร้างสไตล์ชีตที่ขึ้นกับสื่อ -

• การใช้ @media At-rules
• การใช้ @import At-rules
• การใช้ HTML องค์ประกอบที่มีแอตทริบิวต์สื่อ

ตัวอย่าง

มาดูตัวอย่างการสืบค้นสื่อ CSS กัน −

 
 
 
 
 

 
ผลลัพธ์
 

 สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
 

 เมื่อขนาดหน้าจอสูงกว่า 850px −
 

 
 

 เมื่อขนาดหน้าจออยู่ระหว่าง 550px ถึง 850px −
 

 
 

 เมื่อขนาดหน้าจอต่ำกว่า 550px −
 

 
 
ตัวอย่าง
 

 มาดูตัวอย่างอื่นสำหรับคิวรีสื่อ CSS:เอกสาร HTML −
 
<ตัว>

 Vivamus commodo, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat Cras scelerisque faucibus tellus aliquam commodo.Donec sem urna, facilisis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, a accumsan purus varius eget. 
ใน ultrices lectus nisi. Nulla varius ex ut tortor congue viverra. Sed sodales vehicula leo, ประวัติ interdum elit vehicula nec. Donec turpis nunc, iaculis และ nisi sit amet, feugiat lacinia metus 

Suspendisse eget ligula et risus lobortis ornare id ที่ elit แขวนลอย potenti. วีวามุส เพลเลนเตสเก้ เอเลเฟนด์ เปลเลนเตสเก้ Vestibulum neque ante, iaculis a sagittis et, fermentum at metus.
 
เอกสาร CSS (screen.css):p { สี:น้ำเงิน; ตัวอักษรสไตล์:ตัวเอียง; }.สอง { สี:#c303c3; ขนาดตัวอักษร:20px; }body { สีพื้นหลัง:น้ำผึ้ง;}เอกสาร CSS (print.css):p { สี:สีแดง; ตัวอักษรสไตล์:ตัวเอียง;}.สอง (สี:#989898; ขนาดตัวอักษร:40px; }
 
ผลลัพธ์
 

 สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
 

 เมื่อเอกสารปรากฏอยู่ในประเภทสื่อหน้าจอ −
 

 
 

 เมื่อเอกสารปรากฏอยู่ในสื่อสิ่งพิมพ์ −