Media Queries & Mobile-First

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.

.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.

Quick check: A mobile-first stylesheet typically uses which media query condition?

• min-width
• max-width
• aspect-ratio