Have you used or implemented media queries or mobile-specific layouts/CSS?

TL;DR

Media queries conditionally apply CSS using viewport, output, capability, or user-preference features. Use content-driven breakpoints for page-level changes, preference queries such as prefers-reduced-motion for accessibility, and capability queries such as hover without assuming they identify a particular device. Container queries are often better when a reusable component should respond to its own available space.

Have you used or implemented media queries or mobile-specific layouts/CSS?

Responsive layout

A mobile-first stylesheet can start with a single-column layout and add columns when the content has enough room:

.cards {
  display: grid;
  gap: 1rem;
}

@media (width >= 48rem) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

The breakpoint should be chosen where the design becomes cramped, not because it matches a named phone or tablet. A desktop-first max-width approach can still be reasonable when adapting an existing wide-screen design; mobile-first is a strategy, not a browser requirement.

Flexbox and Grid can also make a layout fluid with fewer explicit breakpoints. Images need their own resource-selection mechanism: use srcset and sizes rather than relying on CSS media queries to hide a large image after it has downloaded.

Preferences and input capabilities

Media queries can reflect user settings and input characteristics:

.carousel {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .carousel {
    scroll-behavior: auto;
  }

  .decorative-spinner {
    animation: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 15%);
  }
}

Removing nonessential motion deliberately is safer than globally forcing every animation and transition to an almost-zero duration, which can break state changes that depend on transition events. A hover query should enhance an already usable interface; content and controls still need keyboard and touch-accessible paths. Hybrid devices make “touch device” assumptions unreliable; pointer describes the primary pointing device, while any-pointer considers any available one.

Component-level adaptation

When the same card can appear in a narrow sidebar or a wide main column, its container is more relevant than the viewport:

.card-shell {
  container-type: inline-size;
}

@container (width >= 30rem) {
  .card {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 1rem;
  }
}

Media and container queries complement each other: media queries describe the browsing environment, while container queries describe the space allocated to a component.

Testing the result

Resize emulation is useful, but also test zoom, long translated text, landscape and portrait orientations, keyboard navigation, real touch input where relevant, and the operating system's motion and color preferences. A layout that fits at one viewport width can still fail when text grows or a scrollbar changes the available inline size.

Exercises

Beta

Have you used or implemented media queries or mobile-specific layouts/CSS?

TL;DR