CSS Media Queries

Media queries enable responsive design by applying different styles based on device characteristics like screen width, height, and orientation.

Responsive Breakpoints

@media creates conditional CSS rules.

Common breakpoints: mobile (< 768px), tablet (768-1024px), desktop (> 1024px).

min-width applies styles for screens at least that wide.

max-width applies styles for screens up to that wide.

Combine conditions with and, or, not.

/* Mobile first approach */
.container {
  width: 100%;
  padding: 10px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    width: 1000px;
  }
}

/* Landscape orientation */
@media (orientation: landscape) {
  .hero {
    height: 50vh;
  }
}