Responsive Design

Responsive design ensures your website looks great on every device — phones, tablets, and desktops. CSS gives you the tools to adapt layouts and typography to any screen size.

Media queries

Media queries let you apply CSS rules only when specific conditions are met, such as a viewport width breakpoint.

/* Mobile first: base styles for small screens */
body {
  font-size: 16px;
}

/* Tablet and up */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

Mobile-first approach

Write styles for mobile devices first, then use min-width media queries to add complexity for larger screens. This keeps your CSS lean and ensures a good experience on all devices.

Viewport units

Viewport units (vw, vh, vmin, vmax) let you size elements relative to the browser window instead of the parent element.

.hero {
  height: 100vh;        /* Full viewport height */
  font-size: 5vw;       /* Scales with viewport width */
  padding: 2vmin;       /* Smaller of vw or vh */
}

Responsive images

Use max-width: 100% so images never overflow their container, and object-fit to control how they fill their space.

img {
  max-width: 100%;
  height: auto;
}

.avatar {
  width: 64px;
  height: 64px;
  object-fit: cover;
}

Try it yourself

Quiz