Responsive design: media queries, relative units

Adapt your interfaces to every screen size with the mobile-first approach, media queries, and the rem, %, and vw units.

9 min · 3 questions

The professional approach is mobile-first: you write the small-screen styles first, then enhance the layout as space increases, using min-width media queries. The base CSS stays simple, and each breakpoint only adds what actually changes.

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

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

As for units, ban pixels for typography. 1rem equals the root element's font size (16px by default) and, above all, respects the text size setting the user has chosen in their browser. A visually impaired user who sets their font to 20px will see your whole site scale in proportion - provided you used rem.

h1 {
  font-size: 2.5rem;
}

p {
  font-size: 1rem;
}

.section {
  padding: 4rem 1.5rem;
}

For widths, combine relative units: % to take up a share of the parent, max-width to cap it on large screens, vw for sizes tied to the viewport width (1vw equals 1% of it). The clamp(min, ideal, max) function creates fluid values that adapt without any media query - perfect for large headings.

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

Knowledge check

Make sure you remember the key points of this lesson.

1. In a mobile-first approach, which media query do you use to target large screens?
   • @media (max-width: 768px)
   • @media (min-width: 768px)
   • @media (device: desktop)
2. By default, what does 1rem correspond to?
   • 10 pixels, a fixed value in the CSS standard
   • The parent element's font size
   • The root element's font size, 16px by default
3. What does 50vw equal?
   • 50% of the viewport width
   • 50% of the parent element's width
   • 50 pixels regardless of the window