Media Queries

Craft media queries for viewport, accessibility preferences, and device capabilities.

mediaresponsive

Learning checklist

Definition

Craft media queries for viewport, accessibility preferences, and device capabilities.

Syntax

prefers-reduced-motion

Example

Use the visualizer below to apply these properties and see the result live.

Deep dive

Why this matters

Principles, mental models, and debugging clues tailored to the topic.

Each property is paired with motion or color feedback so you build muscle memory, not just recall syntax.

Controls emit exact CSS you can copy. Use it as a starter token or paste into DevTools for instant validation.

Learn where reflow, repaint, or compositing occurs so you avoid jank and choose GPU-friendly paths.

Focus-visible, reduced-motion, and contrast tips are woven into every lab to keep experiences inclusive.

Practice

Try recreating a UI card using this topic. Toggle between dark and light modes to validate token contrast and responsiveness.

Tip: use DevTools overlays (grid/flex) plus the copy CSS button.

Interactive Lab

Test a breakpoint-driven style change using max-width media queries.

Breakpoint: max-width 480px

Try these

Breakpoint (max-width)480px

Below 480px, this card would become amber (simulated breakpoint).

Use DevTools device toolbar to test breakpoints; pair with prefers-reduced-motion or color-scheme queries.

CSS

@media (max-width: 480px) {
  .card { background: #fbbf24; }
}

HTML

<div class="card">Below 480px, this card becomes amber.</div>