Media Queries & Breakpoints

A media query applies CSS rules only when certain conditions about the screen or device are true.

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

This common pattern shows a single column on phones (the default, before any media query applies), two columns starting at 768px (typical tablet width), and three columns starting at 1024px (typical small-laptop width). These specific pixel values are called breakpoints — chosen based on common device sizes, though modern advice favors picking breakpoints based on where your own content starts to look cramped, rather than copying exact device widths.

Combining conditions:

@media (min-width: 768px) and (max-width: 1023px) {
  /* Applies only in this specific range — e.g., tablet-only styles */
}

@media (orientation: landscape) {
  /* Applies when width is greater than height */
}

@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}

prefers-color-scheme reads the user's OS-level light/dark mode preference, letting a site automatically offer a dark theme without any JavaScript or a manual toggle.

A practical tip: rather than hardcoding pixel breakpoints everywhere, many projects define them once as CSS custom properties or through a preprocessor, keeping breakpoint values consistent across the entire stylesheet and easy to adjust in one place later.