โครงสร้าง media query

รูปแบบพื้นฐาน

/* เงื่อนไขความกว้างขั้นต่ำ */
@media (min-width: 640px) {
  body { font-size: 1.05rem; }
}

/* หลายเงื่อนไข */
@media (min-width: 768px) and (orientation: landscape) {
  .sidebar { display: block; }
}

สิ่งที่มักเปลี่ยนใน @media

จำนวนคอลัมน์กริด · ซ่อน/แสดงเมนู · ขนาดตัวอักษร · ระยะ padding ของหน้า