Lesson 3 / 25

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.

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

/* 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; }
}

Quick check: What does @media (min-width: 768px) mean?

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