CSS Media Queries Cheat Sheet — Responsive Design Breakpoints

/* Mobile first (recommended) — start small, add complexity */
/* Base styles = mobile */
/* Small tablets */
@media (min-width: 640px) { }
/* Tablets */
@media (min-width: 768px) { }
/* Laptops */
@media (min-width: 1024px) { }
/* Desktops */
@media (min-width: 1280px) { }
/* Large screens */
@media (min-width: 1536px) { }
/* These match Tailwind CSS breakpoints:
sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px */

/* Mobile (default) */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
/* Tablet: 2 columns */
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop: 3 columns */
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}

/* Min-width (mobile first — styles apply ABOVE this width) */
@media (min-width: 768px) { }
/* Max-width (desktop first — styles apply BELOW this width) */
@media (max-width: 767px) { }
/* Range (between two widths) */
@media (min-width: 768px) and (max-width: 1023px) { }
/* Modern range syntax (Chrome 104+, Firefox 63+, Safari 16.4+) */
@media (768px <= width < 1024px) { }
@media (width >= 1024px) { }

/* AND */
@media (min-width: 768px) and (orientation: landscape) { }
/* OR (comma) */
@media (max-width: 600px), (orientation: portrait) { }
/* NOT */
@media not print { }
@media not (hover: hover) { }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body { background: #1a1a2e; color: #e0e0e0; }
}
/* Light mode */
@media (prefers-color-scheme: light) {
body { background: white; color: #111; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

{ animation: none !important; transition-duration: 0.01ms !important; }
}

/* Touch devices (no hover) */
@media (hover: none) {
.tooltip { display: none; }
}
/* Devices with hover (mouse) */
@media (hover: hover) {
.card:hover { transform: scale(1.02); }
}
/* High DPI / Retina */
@media (min-resolution: 2dppx) {
.logo { background-image: url(‘logo@2x.png’); }
}
/* Print */
@media print {
nav, footer, .no-print { display: none; }
body { font-size: 12pt; }
}

/* Define a container */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}
/* Style based on container width (not viewport!) */
@container card (min-width: 400px) {
.card {
display: flex;
flex-direction: row;
}
}
@container card (max-width: 399px) {
.card {
display: flex;
flex-direction: column;
}
}

Container queries let components be responsive to their parent’s size, not the viewport. This is a game-changer for reusable components.

/* Mobile: hamburger menu */
.nav-links { display: none; }
.hamburger { display: block; }
/* Desktop: horizontal nav */
@media (min-width: 768px) {
.nav-links {
display: flex;
gap: 2rem;
}
.hamburger { display: none; }
}

/* Fixed sizes per breakpoint */
h1 { font-size: 1.5rem; }
@media (min-width: 768px) {
h1 { font-size: 2rem; }
}
@media (min-width: 1024px) {
h1 { font-size: 2.5rem; }
}
/* Or use clamp() (no media query needed!) /
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
/ min: 1.5rem, preferred: 4vw, max: 3rem */
}

clamp() is the modern way — one line, no breakpoints.