# Media Queries & Mobile-First — CSS Fundamentals: Layout, Flexbox, Grid and Responsive Design

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

> Apply styles by viewport size with media queries, starting mobile-first with min-width.

## 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
- [ ] print

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