CSS Media Queries

The essentials

Quick reference

One focused task per row. Jump to the related section for complete, working examples.

Use	Syntax	Examples
Enhance wider viewports	`@media (min-width: 48rem) { .layout { grid-template-columns: 16rem 1fr; }; }`	View examples
Adapt narrow viewports	`@media (max-width: 40rem) { .toolbar { flex-direction: column; }; }`	View examples
Target a width range	`@media (30rem <= width < 60rem) { .cards { grid-template-columns: repeat(2, 1fr); }; }`	View examples
Check orientation	`@media (orientation: landscape) { .gallery { grid-auto-flow: column; }; }`	View examples
Enhance hover input	`@media (hover: hover) { .card:hover { box-shadow: 0 0.5rem 1rem #0003; }; }`	View examples
Enlarge coarse targets	`@media (pointer: coarse) { .button { min-block-size: 3rem; }; }`	View examples
Detect any hover input	`@media (any-hover: hover) { .tooltip-help { display: inline-block; }; }`	View examples
Reduce nonessential motion	`@media (prefers-reduced-motion: reduce) { .animated { animation: none; scroll-behavior: auto; }; }`	View examples
Honor dark preference	`@media (prefers-color-scheme: dark) { :root { color-scheme: dark; }; }`	View examples
Increase contrast	`@media (prefers-contrast: more) { .card { border-width: 2px; }; }`	View examples
Support forced colors	`@media (forced-colors: active) { .status { border-color: currentColor; }; }`	View examples
Create print styles	`@media print { nav, .actions { display: none; } }`	View examples
Target high resolution	`@media (min-resolution: 2dppx) { .logo { background-image: url(logo@2x.png); }; }`	View examples
Require both conditions	`@media (min-width: 60rem) and (hover: hover) { .menu { display: flex; }; }`	View examples
Accept either query	`@media (orientation: portrait), (max-width: 35rem) { .sidebar { display: none; }; }`	View examples
Negate a query	`@media not print { .print-only { display: none; } }`	View examples
Write the base style first	`.cards { grid-template-columns: 1fr; } @media (min-width: 36rem) { .cards { grid-template-columns: repeat(2, 1fr); }; }`	View examples

Write a useful base layout first, then add media queries where content or interaction needs to adapt. Prefer capability and user-preference features over assumptions about device names, and make responsive changes at the width where the design needs them rather than at a catalog of popular screens.

Step by step

Detailed examples

Add breakpoints where the layout changes

min-width supports a mobile-first progression, while max-width can isolate a narrow-layout correction. Range syntax makes inclusive and exclusive boundaries explicit. Orientation describes viewport geometry, not whether a physical device is being held in a particular way.

One, two, and sidebar layouts

.cards { display: grid; gap: 1rem; }
.toolbar { display: flex; gap: 0.75rem; }

@media (max-width: 40rem) { .toolbar { flex-direction: column; } }
@media (30rem <= width < 60rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48rem) { .layout { display: grid; grid-template-columns: 16rem 1fr; } }
@media (orientation: landscape) { .gallery { grid-auto-flow: column; } }

Back to quick reference ↑

Adapt to input capabilities instead of device labels

hover and pointer describe the primary pointing input, while any-hover checks every available pointer. Keep core actions available without hover because touchscreens and keyboard users may share a device that also has a mouse.

Hover enhancement and larger touch targets

.button { min-block-size: 2.5rem; }

@media (hover: hover) { .card:hover { box-shadow: 0 0.5rem 1rem #0003; } }
@media (pointer: coarse) { .button { min-block-size: 3rem; } }
@media (any-hover: hover) { .tooltip-help { display: inline-block; } }

Note: Do not hide instructions or actions solely because hover is unavailable.

Back to quick reference ↑

Honor visual and motion preferences

Preference media features reflect settings users selected at the operating-system or browser level. Reduce nonessential motion rather than disabling every transition blindly, preserve usable contrast in both color schemes, and avoid overriding system colors in forced-colors mode unless a control truly requires it.

Motion, scheme, contrast, and forced colors

@media (prefers-reduced-motion: reduce) { .animated { animation: none; scroll-behavior: auto; } }
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
@media (prefers-contrast: more) { .card { border-width: 2px; } }
@media (forced-colors: active) { .status { border-color: currentColor; } }

Back to quick reference ↑

Adapt output for print and pixel density

Print styles should remove irrelevant controls, preserve readable URLs or context, and avoid relying on background colors that may not print. Resolution queries can select raster assets, but responsive image markup is usually better for content images because it also accounts for layout size.

Printable page and dense background image

@media print {
  nav, .actions { display: none; }
  main { max-inline-size: none; }
}

@media (min-resolution: 2dppx) {
  .logo { background-image: url(logo@2x.png); }
}

Back to quick reference ↑

Combine media queries with clear logic

and requires every feature in one query to match, a comma separates alternative queries, and not negates a complete media query. Parenthesize individual features and keep complex conditions short enough that future maintainers can reason about when they apply.

AND, OR, and NOT logic

@media (min-width: 60rem) and (hover: hover) { .menu { display: flex; } }
@media (orientation: portrait), (max-width: 35rem) { .sidebar { display: none; } }
@media not print { .print-only { display: none; } }

Back to quick reference ↑

Keep base styles useful before queries

Media queries participate in the normal cascade and do not increase selector specificity. Put a complete base rule before conditional enhancements, keep related queries near the component when the architecture allows it, and order overlapping rules deliberately.

Base-first card grid

.cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 36rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cards { grid-template-columns: repeat(3, 1fr); } }

Back to quick reference ↑

Local code tester

Try responsive and preference queries

Resize the preview and edit the media queries locally to test layout and preference-aware changes.

Runs in your browser

index.html

<link rel="stylesheet" href="styles.css">

<main class="layout">
  <article class="card animated">
    <h2>Responsive card</h2>
    <p>The layout adapts without assuming a device type.</p>
    <button class="button">Continue</button>
  </article>
  <article class="card">
    <h2>Second card</h2>
    <p>Try changing the breakpoint.</p>
  </article>
</main>

styles.css

.layout {
  display: grid;
  gap: 1rem;
}
.card {
  padding: 1rem;
  border: 1px solid #64748b;
  border-radius: .5rem;
}
.button {
  min-block-size: 2.5rem;
}
.animated {
  animation: fade .5s ease-out;
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
@media (min-width: 36rem) {
  .layout {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (pointer: coarse) {
  .button {
    min-block-size: 3rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }
}

Preview

Sources and further reading

References

Authoritative documentation used to verify and expand this cheat sheet.

Help us improve

Found a typo or missing example?

Tell us what would make this cheat sheet clearer, more complete, or more useful.

Share feedback

Quick reference

Detailed examples

Add breakpoints where the layout changes

Adapt to input capabilities instead of device labels

Honor visual and motion preferences

Adapt output for print and pixel density

Combine media queries with clear logic

Keep base styles useful before queries

Try responsive and preference queries

More CSS cheat sheets

CSS Environment Variables, Safe Areas, and Viewport Segments Cheat Sheet

CSS Highlight Pseudo-elements and Custom Highlights Cheat Sheet

CSS Overflow, Clipping, Scrolling, and Resizing Cheat Sheet

References

Found a typo or missing example?