Responsive Web Design Principles

Responsive design is the practice of building layouts that adapt gracefully to any screen size, from a small phone to a large desktop monitor, using a single codebase rather than separate sites for each device type. It rests on a handful of core techniques: fluid layouts, flexible media, and media queries (covered in depth in the next topic).

The dominant philosophy for building responsive sites today is "mobile-first": you design and write CSS for the smallest screen first, then progressively add complexity and additional layout for larger screens, rather than designing for desktop and trying to cram it down to mobile afterward.

Why it matters

More than half of web traffic comes from phones, and Google ranks pages by their mobile version. A site that only works at desktop width loses most of its audience. Responsive design is not an extra feature; it is the default expectation for every page.

Mobile-First Design Philosophy

In a mobile-first approach, your base (unqualified) CSS rules describe the simplest, single-column, small-screen experience, and you use min-width media queries to layer on enhancements as the viewport grows — for example, switching from a single column to a multi-column grid once there's enough horizontal space. This approach tends to produce leaner CSS overall, because you're adding complexity only where it's needed, and it naturally prioritizes performance and content on the most constrained devices.

Fluid Layouts

A fluid layout uses relative units (percentages, fr, rem) instead of fixed pixel widths, so containers and content naturally resize with the viewport instead of requiring a breakpoint for every possible screen width. Combining fluid widths with max-width prevents content from becoming uncomfortably wide on very large screens while still shrinking gracefully on small ones — a pattern often seen as width: 100%; max-width: 1200px;.

Flexible Media

Images and other embedded media should scale within their container rather than overflowing it or leaving awkward gaps. The near-universal baseline rule is img, video { max-width: 100%; height: auto; }, which lets media shrink to fit its container on small screens while never exceeding its natural size on larger ones.

Examples

.gallery {
  display: grid;
  grid-template-columns: 1fr; /* single column by default, mobile-first base */
  gap: 1rem;
}

@media (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr); /* two columns on tablets and up */
  }
}

@media (min-width: 1200px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr); /* three columns on large desktops */
  }
}

On a phone, gallery items stack in a single column; on a tablet-sized viewport they arrange into two columns; on a large desktop they expand into three, all from one shared stylesheet.

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

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

The container fills available width on small screens and centers itself with a comfortable maximum width on large monitors, while every image scales down to fit its column without ever stretching beyond its original resolution.

Exercise

Write mobile-friendly base styles: main takes 90% of the width but never more than 40rem and is centred; images never overflow their container and keep their proportions; and the button fills the full width so that it is easy to tap.

Expected result: on a narrow preview the content fills the width with a margin either side; on a wide one it stops growing at 40rem and stays centred.

/* The page contains: <main> with an <h1>, a <p> and a <button> */

main {
  /* TODO: fluid width with a maximum, centred */
}

img {
  /* TODO: never wider than the container; keep proportions */
}

button {
  /* TODO: full width with comfortable padding */
}

/* The page contains: <main> with an <h1>, a <p> and a <button> */

main {
  width: 90%;
  max-width: 40rem;
  margin: 0 auto;
}

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

button {
  display: block;
  width: 100%;
  padding: 0.75rem;
}

Quick quiz

Interview questions