Responsive Design & Media Queries

Step Zero: the Viewport Meta Tag

Without this line, phones render your page at desktop width and zoom out — nothing responsive works:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Mobile-First Media Queries

Write base styles for small screens, then layer on enhancements as space grows with min-width queries:

/* base = mobile: single column */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* tablets and up */
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

/* desktops and up */
@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

Mobile-first beats desktop-first because the simple layout is the default and complexity is opt-in. Choose breakpoints where your design breaks, not at specific devices — 640 / 768 / 1024 / 1280 are sensible starting points.

Fluid Sizing with clamp()

Often you don’t need a breakpoint at all — let values scale smoothly:

h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  /*               min     fluid  max  */
}
.container {
  width: min(100% - 2rem, 1200px);   /* fluid with a max — no media query */
  margin-inline: auto;
}
.section {
  padding-block: clamp(3rem, 8vw, 6rem);
}

Responsive Images

img {
  max-width: 100%;     /* never overflow the container */
  height: auto;
}
.thumb {
  aspect-ratio: 16 / 9;    /* reserve space — prevents layout shift */
  object-fit: cover;       /* crop to fill, never squish */
}

<img src="hero-800.jpg"
     srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
     sizes="(min-width: 768px) 50vw, 100vw"
     alt="…" loading="lazy">

The browser picks the right file for the screen — smaller downloads on phones for free.

Other Useful Queries

@media (prefers-color-scheme: dark) {
  :root { --bg: #0A0A14; --text: #F9FAFB; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
@media (hover: hover) {
  .card:hover { transform: translateY(-4px); }   /* only devices with real hover */
}

Testing

DevTools device toolbar (Ctrl+Shift+M) simulates sizes, but also: drag your window edge slowly and watch every width — bugs live between breakpoints. Common culprits: fixed widths, unwrapped flex rows, long unbreakable strings (overflow-wrap: break-word fixes those).