CSSEasy

Explain responsive design

The Short Answer

Responsive design is an approach to web design where layouts, images, and content adapt fluidly to different screen sizes and devices. Instead of building separate sites for mobile and desktop, you build one site that responds to the viewport width using flexible grids, relative units, and media queries. The goal is a good user experience regardless of whether someone is on a phone, tablet, or widescreen monitor.

The Three Pillars

Responsive design rests on three core techniques that work together. Flexible grids provide the structure, relative units provide the sizing, and media queries provide the breakpoints where the layout shifts.

1. Flexible Grid Layouts

Instead of fixed pixel widths, responsive layouts use percentage-based or fractional units that stretch and shrink with the viewport. CSS Grid and Flexbox are the modern tools for this — they handle the math of distributing space automatically.

flexible-grid.csscss

/* Grid that adapts columns based on available space */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Flexbox that wraps items when space runs out */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Container with max-width for readability on large screens */
.content {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

The auto-fit with minmax() pattern is particularly powerful — it creates as many columns as will fit at a minimum width, and stretches them equally to fill remaining space. No media queries needed for basic grid responsiveness.

2. Relative Units

Responsive designs avoid fixed pixel values for sizing. Instead, they use relative units that scale with the viewport, the root font size, or the parent container. This ensures elements maintain proper proportions across screen sizes.

Unit	Relative to	Best for
rem	Root font size (16px default)	Font sizes, spacing, component sizing
em	Parent element's font size	Component-internal spacing that scales with text
vw / vh	Viewport width / height	Full-screen sections, hero areas
%	Parent element's size	Fluid widths within containers
fr	Available space in grid	Grid column/row distribution
clamp()	Min, preferred, max	Fluid typography without media queries

fluid-typography.csscss

/* Fluid font size: min 1rem, preferred 2.5vw, max 2rem */
h1 {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

/* Spacing that scales with root font size */
.section {
  padding: 3rem 1.5rem;
  margin-bottom: 2rem;
}

/* Image that never exceeds its container */
img {
  max-width: 100%;
  height: auto;
}

3. Media Queries

Media queries let you apply different styles at specific viewport widths (breakpoints). They're the tool for making larger layout changes — like switching from a single column on mobile to a multi-column layout on desktop, or hiding/showing navigation elements.

media-queries.csscss

/* Mobile-first: base styles are for small screens */
.sidebar {
  display: none;
}

.main-content {
  width: 100%;
}

/* Tablet and up */
@media (min-width: 768px) {
  .layout {
    display: grid;
    grid-template-columns: 250px 1fr;
  }

  .sidebar {
    display: block;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 300px 1fr 250px;
  }
}

Mobile-First Approach

Mobile-first means writing your base CSS for the smallest screen, then using min-width media queries to add complexity for larger screens. This approach works better because it's easier to add layout features as space increases than to remove them as space shrinks. It also ensures mobile users don't download CSS they'll never use.

🏗️

Building up vs tearing down

Mobile-first is like building a house floor by floor — you start with the foundation (mobile) and add rooms (features) as you go up (larger screens). Desktop-first is like building a mansion and then trying to fit it into a tiny lot — you end up removing walls and it never feels quite right.

The Viewport Meta Tag

Without the viewport meta tag, mobile browsers render the page at a desktop width (typically 980px) and then zoom out to fit the screen. This makes responsive CSS useless. The meta tag tells the browser to use the device's actual width as the viewport width.

viewport-meta.htmlhtml

<!-- Required in <head> for responsive design to work on mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- width=device-width: viewport width = device screen width -->
<!-- initial-scale=1.0: no zoom on page load -->

Responsive Images

Images need special handling in responsive design. You don't want to send a 2000px image to a phone with a 375px screen — it wastes bandwidth and slows the page. HTML provides srcset and the <picture> element to serve appropriately sized images based on the device.

responsive-images.htmlhtml

<!-- srcset: browser picks the best size based on viewport -->
<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Hero image"
/>

<!-- picture: different crops/formats for different breakpoints -->
<picture>
  <source media="(min-width: 1024px)" srcset="banner-wide.webp" type="image/webp" />
  <source media="(min-width: 768px)" srcset="banner-medium.webp" type="image/webp" />
  <img src="banner-small.jpg" alt="Promotional banner" />
</picture>

Common Breakpoints

There's no universal set of breakpoints, but most frameworks converge on similar values. The key is to choose breakpoints based on where your layout breaks, not based on specific devices — devices change every year, but layout needs are more stable.

Breakpoint	Target	Typical use
< 640px	Mobile phones	Single column, stacked layout
640px - 768px	Large phones / small tablets	Slightly wider cards, 2-column grids
768px - 1024px	Tablets	Sidebar appears, multi-column content
1024px - 1280px	Laptops	Full navigation, wider content area
> 1280px	Desktops	Max-width container, extra whitespace

Why Interviewers Ask This

Responsive design is a baseline expectation for any frontend developer. Interviewers ask this to confirm you understand the mobile-first approach, know the CSS tools (media queries, flexbox, grid, relative units), can explain the viewport meta tag's purpose, and think about performance (responsive images, not loading unnecessary assets). It's a practical question — every production site needs to work across devices.

⚡

Quick Revision Cheat Sheet

▸

Three pillars: Flexible grids, relative units, media queries

▸

Mobile-first: Base styles for mobile, min-width queries to add complexity

▸

Viewport meta: width=device-width, initial-scale=1.0 (required for mobile)

▸

Fluid typography: clamp(min, preferred, max) — no media queries needed

▸

Auto-fit grid: repeat(auto-fit, minmax(300px, 1fr)) — self-adapting columns

▸

Images: srcset + sizes for resolution, <picture> for art direction