Responsive Design

Build one layout that works on phones, tablets, and desktops. Use a mobile-first approach, sensible breakpoints, and fluid units like clamp() for typography.

responsivemedia querymobile-firstclamp

Duration

⏱ About 2 hours

Level

📊 Beginner+

Prerequisite

🎯 css-05

OUTCOME

A layout that adapts gracefully from 320px to 1440px screens

What you'll learn

1Include the viewport meta tag correctly
2Write mobile-first media queries
3Use rem/em/% and clamp() for fluid sizing
4Test layouts in browser DevTools device mode

1. The Viewport Meta Tag

html

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

⚠️

Without this meta tag, mobile browsers render at 980px and zoom out — media queries effectively do nothing.

2. Mobile-First Media Queries

css

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

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .container { max-width: 960px; margin: 0 auto; padding: 32px; }
  .grid      { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

3. Fluid Sizing with clamp()

css

h1 {
  /* min, preferred, max */
  font-size: clamp(1.75rem, 4vw, 3rem);
}
.container {
  width: min(100%, 1200px);
  padding-inline: clamp(16px, 4vw, 48px);
}

clamp() scales smoothly between viewports — fewer breakpoints needed.

4. Suggested Breakpoints

Name	Min width	Use case
sm	640px	Large phone / small tablet
md	768px	Tablet portrait
lg	1024px	Tablet landscape / small laptop
xl	1280px	Desktop
2xl	1536px	Large desktop

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗