# CSS media queries — Responsive & Mobile-First Design

Source: https://www.geekswithgeeks.com/en/responsive-design/css-media-queries

> Apply different styles at different screen sizes using @media rules — the core of responsive CSS.

## Anatomy of a media query

The syntax: `@media (condition) { /* CSS here */ }`. Common conditions: `(min-width: 768px)` — "apply when screen is 768px or wider", `(max-width: 767px)` — "apply when screen is 767px or narrower", `(orientation: landscape)` — "apply in landscape mode".

## Mobile-first media query pattern

Write base CSS for mobile. Then use `min-width` to progressively enhance for larger screens.

```css
/* Mobile (base) */
.card { width: 100%; font-size: 14px; }

/* Tablet and up */
@media (min-width: 768px) {
  .card { width: 48%; font-size: 16px; }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .card { width: 32%; font-size: 18px; }
}
```

## Common breakpoints

These widths map to common device categories. No standard exists; adjust to your content.

```css
/* Mobile (320px - 767px) */
body { font-size: 14px; }

/* Tablet (768px - 1023px) */
@media (min-width: 768px) {
  body { font-size: 16px; }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  body { font-size: 18px; }
}

/* Large desktop (1440px+) */
@media (min-width: 1440px) {
  body { font-size: 20px; }
}
```

**Quiz:** What does @media (min-width: 768px) mean?

- [x] Apply when screen is 768px or wider
- [ ] Apply when screen is 768px or narrower
- [ ] Apply only at exactly 768px

*Answer:* Apply when screen is 768px or wider. `min-width: 768px` means "768px and above" — a lower bound.

## Avoid max-width in mobile-first

In mobile-first, use min-width for progressive enhancement. max-width is desktop-first thinking.