Should I use max-width or min-width media queries?

Min-width (mobile-first) is the modern default: base styles for small screens, enhancements for larger. Max-width is fine for targeted overrides.

What breakpoint values should I use?

Common rem values: 40rem (640px), 48rem (768px), 64rem (1024px), 80rem (1280px). Match your content, not every device.

Are media queries replaced by container queries?

No. They solve different problems. Use media queries for page-level layout; container queries for components.

CSS Media Queries & Responsive Design Tutorial

1. Mobile-first base styles

Default CSS targets phones. Wider layouts are added with min-width media queries.

Single column (default)

Stacked blocks on narrow screens.

Two columns @ 40rem

At min-width 40rem, the grid becomes two columns.

/* Mobile-first */
.layout { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 40rem) {
  .layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

2. Common breakpoint values

Use rem-based breakpoints so they respect user font settings.

Tablet ~48rem

Padding increases at 48rem

Comfortable reading width on tablets.

Desktop ~64rem

Wider gutters at 64rem

More whitespace on large screens.

@media (min-width: 48rem) { .container { padding-inline: 2rem; } }
@media (min-width: 64rem) { .container { max-width: 72rem; margin-inline: auto; } }

3. prefers-reduced-motion & prefers-color-scheme

Respect user OS settings for motion and color theme.

Motion-safe animation

Hover me

Animation only runs when the user allows motion.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Frequently asked questions

Should I use max-width or min-width media queries?: Min-width (mobile-first) is the modern default: base styles for small screens, enhancements for larger. Max-width is fine for targeted overrides.
What breakpoint values should I use?: Common rem values: 40rem (640px), 48rem (768px), 64rem (1024px), 80rem (1280px). Match your content, not every device.
Are media queries replaced by container queries?: No. They solve different problems. Use media queries for page-level layout; container queries for components.