How to use media queries

Start with the narrow layout

Write the simple single-column design first, then enhance it when more space is available.

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

@media (min-width: 48rem) {
  .layout { grid-template-columns: 2fr 1fr; }
}

Choose content-based breakpoints

Add a breakpoint where the design becomes cramped, not for a particular device model. Resize the browser and zoom text to find that point.

Respect user preferences

Media features can reduce nonessential motion or adapt to a requested color scheme.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}

Keep queries manageable

• Group related changes at a shared breakpoint
• Avoid many tiny device-specific ranges
• Let flexible Grid and Flexbox layouts do most of the work
• Test orientation, zoom, long content, and input methods