Responsive Design – Media Queries

Media queries let you apply styles conditionally based on device features.

@media (min-width:768px) {
  .nav { display:flex; }
}

Common breakpoints:

• @media (max-width: 599px) { … } – phones.
• @media (min-width:600px) and (max-width:1199px) { … } – tablets.
• @media (min-width:1200px) { … } – desktops.

Feature queries (@supports) detect CSS support.

---

Example: Mobile‑first navigation

.nav { display:none; }
@media (min-width:600px) {
  .nav { display:flex; }
}