# Media Queries & Mobile-First — CSS

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

> Apply different styles based on viewport size, starting from small screens.

## Media query syntax

`@media (condition) { ... }` wraps rules that only apply when the condition matches — most commonly a viewport width.

## A breakpoint

Below 600px, stack the columns instead of side-by-side.

```css
.layout {
  display: flex;
  gap: 16px;
}

@media (max-width: 600px) {
  .layout {
    flex-direction: column;
  }
}
```

## Mobile-first approach

Write base styles for **small screens first**, then add `min-width` media queries to enhance the layout as the screen grows — simpler CSS, and phones don't download desktop-only overrides.

**Quiz:** A mobile-first stylesheet typically uses which media query condition?

- [x] min-width
- [ ] max-width
- [ ] aspect-ratio

*Answer:* min-width. min-width queries add styles as the screen gets wider, matching the mobile-first base-then-enhance pattern.