Suggest an edit

Improve this article

Refine the answer for “What is responsive web design”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**Responsive web design (RWD)** is an approach where a website automatically adjusts its layout and content to fit the screen it is viewed on, from a 320px phone to a 2560px monitor.

## Theory

### TL;DR
- RWD has three building blocks: fluid grids (%), flexible images (max-width: 100%), and media queries (@media)
- A fixed-pixel layout breaks on small screens; an RWD layout reflows without horizontal scrolling
- The viewport meta tag is not optional: without it, mobile browsers assume a 980px desktop width
- Mobile-first writes base CSS for small screens, then adds `@media (min-width)` for larger ones
- Default choice for any new site; fixed width only makes sense for single-device kiosk apps

### Quick example

```html
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    /* Mobile-first: 90% wide on phones */
    .box { width: 90%; margin: 20px auto; }
    img { max-width: 100%; height: auto; }

/* Tablet and up: 50% wide */
    @media (min-width: 768px) {
      .box { width: 50%; }
    }
  </style>
</head>
<body>
  <div class="box">Content reflows at every screen size.</div>
</body>
</html>
```

On a phone the box takes ~90% of the viewport. On a tablet it narrows to 50%. The image never overflows its container.

### Key difference

A fixed layout locks widths in pixels. On a 375px phone, a `width: 960px` column spills outside the viewport and forces horizontal scrolling. RWD uses `%`, `vw`, and `fr` so elements scale to whatever space is available. The browser recalculates the box model on every resize and reflows content continuously.

### Mobile-first vs desktop-first

Mobile-first writes base styles for the smallest screen and adds complexity with `min-width` breakpoints. Desktop-first does the opposite with `max-width`. Mobile-first is the better default: phones load less CSS, skip downloading desktop styles on slow connections, and the approach naturally forces content prioritization.

```css
/* Mobile-first base: single column */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }

/* Tablet: 2 columns */
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: 4 columns */
@media (min-width: 1200px) {
  .card-grid { grid-template-columns: repeat(4, 1fr); }
}
```

### When to use

- New website or redesign: RWD by default
- Content-heavy docs site: RWD with mobile-first media queries
- Single-device kiosk app: fixed width is acceptable
- Legacy site quick-fix: add media queries on top of existing CSS
- Performance-critical page for low-end devices: RWD with lazy-loaded images

### How the browser handles it

The browser parses HTML and CSS into a render tree. The CSSOM applies media queries during style resolution, and Blink (Chrome's engine) recalculates widths, heights, and margins using relative units. The viewport meta tag tells the browser to use the device's actual pixel width instead of the 980px default.

### Common mistakes

**Forgetting the viewport meta tag**

```html

<div style="width: 960px;">Content overflows</div>
```

Add `<meta name="viewport" content="width=device-width, initial-scale=1">` to every HTML page. Without it, media queries won't trigger on most phones because the browser reports a fake 980px viewport. This is the first thing to check when mobile styles stop working.

**Fixed heights in percentage-based grids**

```css
/* Wrong: breaks on rotation or tall content */
.row { height: 500px; }

/* Right */
.row { min-height: 100vh; }
```

Percentage heights require a defined parent height. On a rotated phone, `height: 500px` clips content. Use `min-height` or flexbox with `align-items: stretch`.

**Desktop-first media queries with heavy assets**

```css
/* Wrong: phones download the image even when sidebar is hidden */
.sidebar { background: url('large-image.jpg'); }
@media (max-width: 768px) { .sidebar { display: none; } }
```

The phone still downloads `large-image.jpg`. Flip the approach: start mobile, add features progressively with `min-width`.

**Images without max-width**

```css
/* Wrong: 800px image spills out of a 375px screen */
img { width: 800px; }

/* Right */
img { max-width: 100%; height: auto; }
```

**Navigation width set to 100vw**

```css
/* Wrong: vw includes scrollbar width in older Chrome builds */
nav { width: 100vw; }

/* Right */
nav { width: 100%; }
```

The scrollbar causes a layout shift. I've seen this one trigger production bugs more than any other `vw` quirk. `width: 100%` is the safe choice.

### Real-world usage

- Bootstrap 5: `container-fluid` with responsive breakpoints, found on roughly 40% of top websites
- Tailwind CSS: `sm:`, `md:`, `lg:` prefix classes apply media queries automatically
- CSS Grid: `repeat(auto-fit, minmax(250px, 1fr))` creates columns without any media queries
- WordPress Gutenberg: container queries power the block editor preview at different panel widths
- GitHub and Netflix: card grids shift from 1 to 4 columns using the same mobile-first breakpoint pattern above

### Follow-up questions

**Q:** What is the difference between media queries and container queries?
**A:** Media queries check the viewport size. Container queries check the parent element's size. Use container queries for reusable components like cards that appear in different layout contexts.

**Q:** How does the viewport meta tag work?
**A:** It tells the browser to render at the device's actual width instead of 980px. Without it, `@media (max-width: 768px)` will never trigger on most phones.

**Q:** What units should you use for responsive layouts?
**A:** Use `%` and `fr` for grid columns, `rem` for font sizes, `vw`/`vh` for full-screen sections. Avoid `px` for widths in fluid layouts since it ignores the available space.

**Q:** How do you test responsive design?
**A:** Chrome DevTools device emulation covers quick checks. For production, test on real devices. Run Lighthouse to catch performance issues from unoptimized images.

**Q (senior):** A card component is used in a 3-column grid and in a narrow sidebar. Why would container queries solve what media queries cannot?
**A:** A media query fires at a fixed viewport width regardless of where the card sits. A container query fires based on the parent container's width. The same card gets a horizontal layout in the wide grid and a vertical one in the sidebar, with no extra CSS or JavaScript.

## Examples

### Basic: fluid card grid

```css
/* Mobile: single column */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: 4 columns */
@media (min-width: 1200px) {
  .card-grid { grid-template-columns: repeat(4, 1fr); }
}

.card { border: 1px solid #ddd; padding: 1rem; }
```

Phone shows 1 card per row, tablet 2, desktop 4. Two breakpoints, no JavaScript. This is the pattern GitHub uses for repository cards.

### Intermediate: auto-reflow grid without media queries

```css
.grid {
  display: grid;
  /* As many columns as fit, each at least 250px wide */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}
```

`auto-fit` creates as many columns as the container can hold. When the viewport drops below ~500px, the grid falls to one column automatically. No media queries needed. Used in MDN documentation examples and most modern component libraries.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts1162 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.