📱 CSS Media Queries – Simple Cheat Sheet

Media queries let you apply CSS only when certain conditions are true, like screen size, device type, or user preferences.

---

🧠 Basic Syntax

@media (condition) {
  /* CSS rules */
}

Example:

@media (max-width: 600px) {
  body {
    background: lightblue;
  }
}

👉 Applies only when screen width is 600px or less.

---

📏 Screen Width (Most Common)

Mobile First (Recommended ✅)

/* Default = mobile */

@media (min-width: 768px) {
  /* Tablet and up */
}

@media (min-width: 1024px) {
  /* Laptop and up */
}

Desktop First

@media (max-width: 1024px) {
  /* Tablet and below */
}

@media (max-width: 600px) {
  /* Mobile */
}

---

📱 Common Breakpoints (Easy to Remember)

---

🖥️ only screen Explained

@media only screen and (max-width: 600px) {
  /* CSS */
}

• screen → targets screens (not print)

• only → ignores very old browsers

• Optional in modern projects

---

🧭 Orientation (Portrait / Landscape)

@media (orientation: portrait) {
  /* Phone held vertically */
}

@media (orientation: landscape) {
  /* Phone held horizontally */
}

---

♿ User Preferences (Accessibility)

Reduce Motion (Very Important)

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

👉 Respects users who dislike animations.

Dark Mode

@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
}

---

🖨️ Print Media

@media print {
  nav, footer {
    display: none;
  }
}

👉 Applies when printing the page.

---

🔗 Multiple Conditions

@media (min-width: 600px) and (max-width: 900px) {
  /* Only tablets */
}

---

❌ Common Mistakes

❌ Forgetting px

(max-width: 600) /* WRONG */

✅ Correct

(max-width: 600px)

❌ Overusing too many breakpoints

---

🧠 Easy Mental Model

• min-width → "From this size and bigger"

• max-width → "From this size and smaller"

---

✅ Best Practices

✔ Prefer mobile-first (min-width)
✔ Keep breakpoints consistent
✔ Use media queries only when layout breaks
✔ Respect accessibility preferences

---

🚀 One-Line Summary

Media queries help your website adapt to screen sizes, devices, and user preferences.

---