Responsive Design

Media queries, mobile-first, viewport units, and fluid sizing with clamp()

Knowledge0%

Learn & Drill

Fluency0%

Drill & Speed

Retention0%

Mastery & Review

Confidence0%

All modes

Practice

Free tier: read the explanation here. Upgrade to Pro for Drills, Speed challenges & Mastery badges.

Upgrade

Knowledge

Fluency

Retention

Knowledge Debt detected

You can study this freely — but your score may plateau if these foundations have gaps. The Mastery badge requires them to be solid.

CSS Flexbox0%

CSS Grid0%

Explanation

Responsive design makes a single codebase look good on any screen — mobile phone to 4K monitor.

Mobile-first approach:

Write CSS for the smallest screen first. Use min-width media queries to add complexity for larger screens:

css

/* Base styles: mobile */
.container { padding: 16px; }
.card-grid  { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* ≥ 640px: tablet */
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ≥ 1024px: desktop */
@media (min-width: 1024px) {
  .container  { padding: 40px; }
  .card-grid  { grid-template-columns: repeat(3, 1fr); }
}

Common breakpoints (Tailwind conventions):

| Name | Min-width | |---|---| | sm | 640px | | md | 768px | | lg | 1024px | | xl | 1280px | | 2xl | 1536px |

Viewport units:

css .hero { height: 100vh; /* 100% of the viewport height */ width: 100vw; /* 100% of the viewport width */ } /* dvh = dynamic viewport height — excludes browser chrome on mobile */ .full-screen { min-height: 100dvh; }

Fluid typography with clamp():

css /* clamp(min, preferred, max) */ h1 { font-size: clamp(1.5rem, 5vw, 3rem); } /* On narrow screens: 1.5rem Scales up with viewport width (5vw) Never exceeds 3rem */

Min / max / clamp for any property:

css .container { width: min(100%, 1200px); /* whichever is smaller */ padding: max(16px, 4vw); /* whichever is larger */ font-size: clamp(1rem, 2vw, 1.5rem); }

Other media features:

css @media (prefers-color-scheme: dark) { body { background: #0f172a; color: #f1f5f9; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } @media print { nav, .sidebar { display: none; } }

Examples

Mobile-first layout with breakpoints

Start with one column (mobile), add sidebar at tablet width, constrain and center at desktop — all with just 3 media queries

/* Mobile first: single column */
.page-layout {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 16px;
}

/* Tablet (≥768px): sidebar moves alongside main */
@media (min-width: 768px) {
  .page-layout {
    grid-template-areas:
      "header  header"
      "main    sidebar"
      "footer  footer";
    grid-template-columns: 1fr 280px;
    padding: 24px;
  }
}

/* Desktop (≥1200px): wider container */
@media (min-width: 1200px) {
  .page-layout {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px;
  }
}

Fluid type scale with clamp

`clamp()` as CSS variables creates a design system where font sizes scale smoothly with viewport width — no breakpoints needed for typography

/* Fluid typography — scales between min and max */
:root {
  --text-sm:   clamp(0.875rem, 1.5vw, 1rem);
  --text-base: clamp(1rem,     2vw,   1.125rem);
  --text-lg:   clamp(1.125rem, 2.5vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   4vw,   2.25rem);
  --text-2xl:  clamp(2rem,     6vw,   3.75rem);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
p  { font-size: var(--text-base); line-height: 1.6; }

/* Dark mode via media query */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #f1f5f9;
  }
}

How well did you understand this?

Next in CSS & Styling

CSS Variables & Animations

Continue