CSS Media Queries Cheat Sheet

Basic Syntax

@media Rule

Apply styles conditionally

@media screen and (min-width: 768px) { .container { max-width: 720px; } }

Media Types

Target specific output devices

@media all { } /* all devices (default) */ @media screen { } /* screens */ @media print { } /* printers */

Common Breakpoints

Device	Min-Width	Max-Width	CSS
Mobile S	320px	374px	`@media (max-width: 374px)`
Mobile L	375px	479px	`@media (max-width: 479px)`
Tablet	480px	767px	`@media (min-width: 480px)`
Tablet L	768px	1023px	`@media (min-width: 768px)`
Desktop	1024px	1279px	`@media (min-width: 1024px)`
Desktop L	1280px	1439px	`@media (min-width: 1280px)`
Wide	1440px+	—	`@media (min-width: 1440px)`

Framework Breakpoints

Framework	xs	sm	md	lg	xl	2xl
Tailwind	—	640px	768px	1024px	1280px	1536px
Bootstrap	0	576px	768px	992px	1200px	1400px
MUI	0	600px	900px	1200px	1536px	—

Width & Height Queries

Mobile-First (Recommended)

Start small, add complexity

/* Base: mobile styles */ .grid { grid-template-columns: 1fr; } /* Tablet and up */ @media (min-width: 768px) { .grid { grid-template-columns: 1fr 1fr; } } /* Desktop and up */ @media (min-width: 1024px) { .grid { grid-template-columns: 1fr 1fr 1fr; } }

Desktop-First

Start large, reduce for mobile

/* Base: desktop styles */ .sidebar { width: 300px; } /* Tablet and below */ @media (max-width: 1023px) { .sidebar { width: 200px; } } /* Mobile */ @media (max-width: 767px) { .sidebar { display: none; } }

Range (Between)

Target specific range

/* Tablet only */ @media (min-width: 768px) and (max-width: 1023px) { .nav { flex-direction: column; } }

Aspect Ratio

Target screen proportions

@media (aspect-ratio: 16/9) { } @media (min-aspect-ratio: 1/1) { } @media (orientation: landscape) { } @media (orientation: portrait) { }

Modern Range Syntax (Level 4)

New Range Syntax

Cleaner comparison operators

/* Old syntax */ @media (min-width: 768px) { } @media (max-width: 1023px) { } /* New range syntax */ @media (width >= 768px) { } @media (width < 1024px) { } @media (768px <= width < 1024px) { }

Range Operators

Available comparison operators

@media (width > 600px) { } @media (width >= 600px) { } @media (width < 600px) { } @media (width <= 600px) { } @media (width = 600px) { }

User Preference Queries

Dark Mode

prefers-color-scheme

@media (prefers-color-scheme: dark) { :root { --bg: #1a1a2e; --text: #e4e4e7; } } @media (prefers-color-scheme: light) { :root { --bg: #ffffff; --text: #1a1a2e; } }

Reduced Motion

prefers-reduced-motion

@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } @media (prefers-reduced-motion: no-preference) { .hero { animation: fadeIn 0.5s ease; } }

High Contrast

prefers-contrast

@media (prefers-contrast: more) { .btn { border: 2px solid currentColor; } } @media (prefers-contrast: less) { .subtle { opacity: 0.8; } }

Reduced Transparency

prefers-reduced-transparency

@media (prefers-reduced-transparency: reduce) { .overlay { background: #000; /* solid */ } } @media (prefers-reduced-transparency: no-preference) { .overlay { background: rgba(0,0,0,0.7); } }

Logical Operators

AND

All conditions must match

@media screen and (min-width: 768px) and (orientation: landscape) { /* landscape tablets and up */ }

OR (Comma)

Any condition can match

@media (max-width: 480px), (orientation: portrait) { /* mobile OR portrait */ }

NOT

Negate entire query

@media not print { /* everything except print */ } @media not (hover: hover) { /* touch-only devices */ }

ONLY

Prevent older browsers applying styles

@media only screen and (min-width: 768px) { /* modern browsers only */ }

Interaction Queries

Hover Capability

Detect hover support

@media (hover: hover) { .card:hover { transform: translateY(-4px); } } @media (hover: none) { /* touch devices — no hover effects */ }

Pointer Precision

Fine (mouse) vs coarse (touch)

@media (pointer: fine) { .btn { padding: 0.5rem 1rem; } } @media (pointer: coarse) { .btn { padding: 0.75rem 1.5rem; } /* larger touch targets */ }

Container Queries

Container Setup

Define a container context

.card-container { container-type: inline-size; container-name: card; } /* Shorthand */ .card-container { container: card / inline-size; }

Container Query

Style based on container size

@container card (min-width: 400px) { .card { grid-template-columns: 200px 1fr; } } @container (width > 600px) { .card { font-size: 1.2rem; } }

Container Types

Available container-type values

container-type: normal; /* default, no queries */ container-type: inline-size; /* width queries */ container-type: size; /* width + height */

Container Units

Size relative to container

.card-title { font-size: 5cqi; /* container inline */ } /* cqw = container width cqh = container height cqi = container inline cqb = container block cqmin = smaller of cqi/cqb cqmax = larger of cqi/cqb */

Print Styles

@media print { nav, footer, .sidebar, .no-print { display: none; } body { font-size: 12pt; color: #000; background: #fff; } a[href]::after { content: " (" attr(href) ")"; } .page-break { break-before: page; } }

Responsive Typography Pattern

/* Fluid typography with clamp() — no media queries needed */ h1 { font-size: clamp(1.5rem, 4vw, 3rem); } h2 { font-size: clamp(1.25rem, 3vw, 2rem); } p { font-size: clamp(1rem, 1.5vw, 1.25rem); } /* With media queries for fine control */ body { font-size: 16px; } @media (min-width: 768px) { body { font-size: 18px; } } @media (min-width: 1200px) { body { font-size: 20px; } }

Display Features

Feature	Values	Use Case
`resolution`	`min-resolution: 2dppx`	Retina/HiDPI displays
`color`	`min-color: 8`	Color bit depth
`color-gamut`	`srgb`, `p3`, `rec2020`	Wide color gamut displays
`dynamic-range`	`standard`, `high`	HDR displays
`display-mode`	`fullscreen`, `standalone`, `browser`	PWA display mode
`inverted-colors`	`inverted`, `none`	Accessibility