Responsive Design

Media Queries

Media queries apply CSS only when a condition is true, usually a minimum screen width.

Syntax:

@media (min-width: 768px) {
  /* rules for screens 768px and wider */
}

.cards { display: grid; grid-template-columns: 1fr; gap: 16px; }

@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

Common breakpoints

Width	Devices
`640px`	Large phones
`768px`	Tablets
`1024px`	Laptops
`1280px`	Desktops

Other useful queries

@media (prefers-color-scheme: dark) { body { background: #111; color: #eee; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
@media print { nav, footer { display: none; } }