Responsive Design

Design for every screen

Responsive design makes a single codebase adapt gracefully from a 360px phone to a 4K monitor. The three pillars are fluid layouts, media queries, and relative units.

Mobile-first

Start with styles for the smallest screen, then progressively enhance for larger ones. This forces simpler layouts and tends to produce cleaner CSS, because base styles are the minimal case.

/* base: mobile */
.card { font-size: 1rem; padding: 1rem; }

/* enhance: tablet and up */
@media (min-width: 768px) {
  .card { font-size: 1.25rem; }
}

Media query syntax

A media query applies styles only when a condition is true:

@media (min-width: 1024px) and (orientation: landscape) {
  .sidebar { display: block; }
}

Use min-width for mobile-first (min = "this size and up"). max-width implies desktop-first, which is harder to maintain.

Viewport units

• vw / vh — 1% of viewport width/height.
• vmin — 1% of the smaller viewport dimension (useful for consistent sizing).

Fluid typography with clamp()

clamp(min, preferred, max) returns a value that never goes below min or above max, scaling smoothly in between:

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

The heading shrinks on phones (down to 1.5rem) and grows on desktops (up to 3rem), with no breakpoints at all.

Mobile-first isn't just a media-query order — it's a mindset. Build the minimal viable layout first, and every enhancement becomes an additive, low-risk change.