CSS Media Queries: Building Layouts That Adapt to Any Screen

What Media Queries Do

Media queries let CSS apply different styles depending on the characteristics of the user’s device or viewport. They are the primary tool for responsive web design: rather than building separate stylesheets for different screen sizes, you write a single stylesheet that responds to its environment.

The basic syntax wraps a block of CSS rules inside a condition.

@media (condition) {
  /* rules applied when condition is true */
}

This applies a different background on narrow screens:

@media (max-width: 600px) {
  body {
    background-color: #f0f4ff;
  }
}

The styles inside the block apply only when the viewport is 600 pixels wide or less.

Breakpoints

A breakpoint is the pixel value at which a layout shifts. There are no universally correct breakpoints — they should reflect your content and audience — but the following ranges serve as a reliable starting point.

A simple example that adjusts font size between mobile and desktop:

@media (max-width: 768px) {
  body { font-size: 14px; }
}
@media (min-width: 769px) {
  body { font-size: 18px; }
}

Media Features

Width and height

max-width applies styles when the viewport is at or below the specified value. min-width applies them when the viewport meets or exceeds it. Together they cover the full range of layout changes needed for a responsive design.

@media (max-width: 600px) {
  .article-grid {
    display: block;
  }
}
@media (min-width: 601px) {
  .article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

Orientation

The orientation feature detects whether the device is held in portrait or landscape mode, which is useful for adjusting layouts when a user rotates their phone or tablet.

@media (orientation: portrait) {
  .hero { height: 60vh; }
}
@media (orientation: landscape) {
  .hero { height: 40vh; }
}

High-resolution displays

The min-resolution query targets high-density screens such as Retina displays. Assets rendered at standard density can appear blurry at 2x or 3x pixel ratios, so this query lets you serve sharper alternatives for those devices.

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .site-logo {
    background-image: url('logo@2x.png');
    background-size: 120px 40px;
  }
}

Dark mode

The prefers-color-scheme feature reads the user’s system-level color preference. This lets you support dark mode without requiring a manual toggle in the interface.

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a2e;
    color: #e2e8f0;
  }
}

Combining Conditions

Media queries can join multiple conditions using and (both must be true) or a comma, which acts as OR (either condition is sufficient).

AND: apply styles within a range

@media (min-width: 600px) and (max-width: 1024px) {
  .sidebar {
    display: block;
    width: 280px;
  }
}

The styles apply only when the viewport falls between 600px and 1024px.

OR: apply styles for multiple conditions

@media (max-width: 600px), (orientation: portrait) {
  .nav-links {
    display: none;
  }
}

The styles apply if the screen is narrow or if the device is in portrait mode — whichever comes first.

Targeting specific device classes

@media screen and (max-width: 480px) { /* phones */ }
@media screen and (min-width: 481px) and (max-width: 1024px) { /* tablets */ }
@media screen and (min-width: 1025px) { /* desktops */ }

Mobile-First vs Desktop-First

The order in which you write media queries reflects a design philosophy.

Mobile-first means writing base styles for the smallest screen and using min-width queries to layer on complexity as the viewport grows. This is the recommended approach because the default styles stay lean and the experience is guaranteed to work on constrained devices before anything else is added.

.posts {
  display: block;
  font-size: 14px;
}
@media (min-width: 768px) {
  .posts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 16px;
  }
}
@media (min-width: 1280px) {
  .posts {
    grid-template-columns: repeat(3, 1fr);
  }
}

Desktop-first starts with large-screen styles and uses max-width to scale down. This works but tends to produce heavier base styles and is generally harder to maintain as a project grows.

.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  font-size: 16px;
}
@media (max-width: 768px) {
  .posts {
    display: block;
    font-size: 14px;
  }
}

The approach should match your users. If most traffic comes from mobile, start there and treat larger screens as an enhancement.

See you soon.