Responsive Design

Responsive design means a single HTML document adapts its layout, typography, and imagery to work well across all screen sizes — from a 320 px wide phone to a 4K monitor. It is not an optional feature; more than half of all web traffic comes from mobile devices, and a site that breaks on mobile is a broken site.

Mobile-First Approach

Mobile-first means you write your default CSS for small screens, then use media queries to progressively enhance the layout for larger screens. The alternative — desktop-first — means overriding complex desktop styles for mobile, which is harder to maintain.

/* Mobile-first: default styles for narrow screens */
.card-grid {
  display: grid;
  grid-template-columns: 1fr; /* single column on mobile */
  gap: 16px;
}

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

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

The Viewport Meta Tag

Without this tag, mobile browsers render the page at ~980 px and then scale it down, which looks terrible:

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

width=device-width tells the browser to use the device’s actual screen width as the viewport width. initial-scale=1 prevents any initial zoom. This tag is required for media queries to work as expected on mobile.

Fluid Units

/* rem-based spacing scale */
.container {
  max-width: 72rem;      /* ~1152px at 16px base */
  padding-inline: 1rem;
}

h1 { font-size: 2rem; }       /* 32px — scales with user preferences */
p  { font-size: 1rem; }       /* 16px baseline */

CSS clamp() for Fluid Typography

clamp(min, preferred, max) returns a value that scales between a minimum and maximum as the viewport changes — no media queries needed:

h1 {
  /* Minimum 1.5rem, fluid between viewports, maximum 3rem */
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

.container {
  /* Fluid padding that never goes below 1rem or above 2rem */
  padding-inline: clamp(1rem, 5vw, 2rem);
}

The 4vw + 1rem preferred value is calculated relative to the viewport, creating genuinely fluid scaling with no breakpoints.

Responsive Images with srcset

A single <img> tag can serve different image files based on the device’s screen width and pixel density:

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg   400w,
    photo-800.jpg   800w,
    photo-1600.jpg 1600w
  "
  sizes="
    (max-width: 640px) 100vw,
    (max-width: 1024px) 50vw,
    33vw
  "
  alt="A mountain landscape at sunset"
  width="800"
  height="533"
/>

• srcset lists candidate files with their intrinsic widths in w descriptors.
• sizes tells the browser how wide the image will be displayed at each breakpoint.
• The browser combines these to select the most appropriate file — high-DPI phones automatically get the larger file.

Further Learning

Search these terms to go deeper:

• “Responsive design patterns Google Developers” — canonical patterns for navigation, tables, and images at different sizes
• “CSS clamp fluid typography” — tools like Utopia let you generate clamp() values visually
• “Core Web Vitals” — Google’s performance metrics (LCP, CLS, INP) and how responsive design affects them
• “container queries CSS” — the modern evolution: styling based on a component’s own container, not the viewport
• “logical properties responsive design” — padding-inline and margin-block for direction-agnostic responsive styles

Responsive Design

Water takes the shape of whatever glass you pour it into. Responsive design makes a web page do the same thing — one page that reshapes itself to look good on a tiny phone, a tablet, or a giant monitor. Since most people browse on phones, this isn’t a nice-to-have; a site that breaks on mobile is simply broken.

Start small: mobile-first

Design for the phone first, then add styles for bigger screens. This is easier than the reverse, because you start simple and layer on complexity.

/* Default: one column (phone) */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Bigger screen? Add more columns */
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

A @media (min-width: 640px) block is just “apply these styles only when the screen is at least 640px wide.”

The one tag you must not forget

Without this line in your <head>, phones pretend to be a wide desktop and shrink everything down to unreadable size:

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

It tells the phone “use your real width.” Media queries won’t behave correctly without it.

Units that flex

• % — relative to the parent. Good for widths.
• rem — relative to the page’s base font size. Best for font sizes and spacing, because it respects the user’s zoom/preferences.
• vw / vh — 1% of the screen’s width / height. Good for full-screen sections.

h1 { font-size: 2rem; } /* scales nicely, ~32px */
.container { max-width: 72rem; padding-inline: 1rem; }

Fluid text with clamp()

clamp(min, ideal, max) picks a size that grows with the screen but never gets too small or too big — no media queries needed:

h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
  /* never smaller than 1.5rem, never bigger than 3rem */
}

Images that fit the device

srcset lets one <img> offer several sizes, and the browser picks the best one — so phones don’t download a huge desktop photo:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 640px) 100vw, 50vw"
  alt="A mountain at sunset"
  width="800" height="533"
/>

In one sentence

Write styles for phones first, add the viewport meta tag, use rem and clamp() for text, and let @media queries widen the layout on bigger screens.

Want to go deeper?

Switch to Expert mode above for the full units table, <picture> for art direction, and Core Web Vitals.