กฎของ @media ใน CSS

กฎ CSS @media ใช้เพื่อระบุสไตล์ที่แตกต่างกันสำหรับประเภทสื่อต่างๆ (เช่น การพิมพ์ หน้าจอ ทั้งหมด ฯลฯ) ในสไตล์ชีตเดียว โดยปกติแล้วจะตามด้วยรายการประเภทสื่อที่คั่นด้วยเครื่องหมายจุลภาคและบล็อกการประกาศ CSS ที่มีกฎรูปแบบสำหรับสื่อเป้าหมาย

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์ -

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

ตัวอย่าง

มาดูตัวอย่างกฎ CSS @media กัน −

 
 
 
 
 

 
ผลลัพธ์
 

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

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

 
 

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

 
 

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

 
 
ตัวอย่าง
 

 มาดูตัวอย่างอื่นสำหรับกฎ CSS @media กัน −
 

นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต นี่คือข้อความสาธิต 
 
ผลลัพธ์
 

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

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

 
 

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