กฎ @media At-rules ใน CSS (Media Queries)

กฎ @media ใน CSS ใช้ระบุสไตล์ที่แตกต่างกันสำหรับประเภทสื่อ (media types) ที่ต่างกัน เช่น print, screen, all ในไฟล์สไตล์ชีทเดียวกัน มักตามด้วยรายการ media types คั่นด้วยจุลภาคและบล็อกการประกาศ CSS สำหรับ media เป้าหมาย

ไวยากรณ์ (Syntax)

@media not | only mediatype and (expressions) {
  CSS-Code;
}

ตัวอย่างที่ 1: Responsive Grid Layout

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * { box-sizing: border-box; }
    .col {
      float: left; width: 20%; padding: 40px;
    }
    body { background-color: lemonchiffon; margin: 20px; }
    
    /* แท็บเล็ต: ≤ 850px */
    @media screen and (max-width: 850px) {
      .col { width: 50%; }
      body { background-color: mediumseagreen; }
    }
    
    /* มือถือ: ≤ 550px */
    @media screen and (max-width: 550px) {
      .col { width: 100%; }
      body { background-color: powderblue; }
    }
  </style>
</head>
<body>
  <div class="row">
    <div class="col" style="background-color:#373;"></div>
    <div class="col" style="background-color:#363;"></div>
    <div class="col" style="background-color:#353;"></div>
    <div class="col" style="background-color:#343;"></div>
    <div class="col" style="background-color:#333;"></div>
  </div>
</body>
</html>

ผลลัพธ์

หน้าจอกว้างกว่า 850px (5 คอลัมน์):

หน้าจอ 550-850px (2 คอลัมน์):

หน้าจอแคบกว่า 550px (1 คอลัมน์):

ตัวอย่างที่ 2: เปลี่ยนพื้นหลังและสีข้อความตามขนาดหน้าจอ

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    p {
      background-origin: content-box; background-repeat: no-repeat;
      background-size: cover; box-shadow: 0 0 3px black;
      padding: 20px; background-origin: border-box;
    }
    @media screen and (max-width: 900px) {
      p {
        background: url("https://www.tutorialspoint.com/swing/images/swing.jpg");
        color: #c303c3;
      }
    }
    @media screen and (max-width: 500px) {
      p {
        color: black;
        background: url("https://www.tutorialspoint.com/cplusplus/images/cplusplus.jpg");
      }
    }
  </style>
</head>
<body>
  <p>This is demo text... (ยาว)</p>
</body>
</html>

ผลลัพธ์

หน้าจอกว้างกว่า 500px:

หน้าจอแคบกว่า 500px:

Media Types ที่พบบ่อย

• all - ทุกอุปกรณ์ (ค่าเริ่มต้น)
• screen - หน้าจอคอมพิวเตอร์ มือถือ แท็บเล็ต
• print - พิมพ์/ดูตัวอย่างการพิมพ์
• speech - Screen readers

Logical Operators

• and - และ (ทั้งสองเงื่อนไขต้องเป็นจริง)
• , (comma) - หรือ (อย่างน้อยหนึ่งเงื่อนไขเป็นจริง)
• not - นิเสธ
• only - ป้องกัน browser เก่าอ่านผิด