CSS Media Queries Cheat Sheet: Breakpoints, Prefers & Container Queries

CSS media queries apply rules when the device or user environment matches a condition. Write mobile-first with min-width, respect prefers-reduced-motion and prefers-color-scheme, and use container queries when a component should respond to its parent width, not the viewport.

This CSS cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• Mobile-first: Base styles for small screens, then @media (min-width: 48rem) to enhance.
• Units: Prefer rem or em in queries so zoom and root font-size stay consistent.
• Hover: @media (hover: hover) for hover-only UI. Phones are often (hover: none).
• Motion: prefers-reduced-motion: reduce — shorten or disable decorative animation.
• Scheme: prefers-color-scheme: dark or drive theme from a class plus CSS variables.
• Print: @media print hide nav/CTAs, expand links, use dark text on white.
• Range: Modern syntax: @media (width >= 48rem) where supported; min-width is the safe classic.
• Container: container-type: inline-size on a parent, then @container (min-width: 20rem).

Copy-paste examples

Mobile-first layout plus reduced motion

Do not ship large-layout CSS as the default and fight it with max-width. Disable non-essential motion when the user asks.

.layout { display: grid; gap: 1rem; }
@media (min-width: 48rem) {
  .layout { grid-template-columns: 16rem 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
.card { container-type: inline-size; }
@container (min-width: 24rem) {
  .card { display: flex; gap: 1rem; }
}

Common mistakes

• Desktop-first max-width stacks that fight each other at every breakpoint.
• Hiding content with display: none on mobile instead of reordering with Grid/Flex.
• Ignoring prefers-reduced-motion on looping hero videos and parallax.
• Testing only Chrome’s device toolbar and never a real phone width plus font zoom.

FAQ

1. How many breakpoints do I need? As few as the design needs — often two or three. Name them after layout changes, not iPhone models.

1. Viewport queries vs container queries? Viewport = whole page chrome. Container = this card in a sidebar vs in the main column.

1. Should I disable zoom in the viewport meta? No. That hurts accessibility. Design for reflow at 200% zoom instead.

Related CSS cheat sheets

• Css Cheat Sheet 2026
• Css Flexbox Cheat Sheet
• Css Grid Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.