# Responsive Web Design

> Use when implementing responsive layouts, fluid typography, responsive images, or choosing between container queries and media queries.

- Skill: `majiayu000/responsive-web-design-3` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/responsive-web-design-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/responsive-web-design-3/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/responsive-web-design-3

---


# Responsive Web Design

## Container Queries vs Media Queries

| Feature | Media Queries | Container Queries |
|---|---|---|
| Based on | Viewport size | Parent container size |
| Use case | Page-level layout | Component-level layout |
| Nesting | N/A | Supported |
| Browser support | Universal | Modern browsers (2023+) |

**Default**: Media queries for page layout (nav, sidebar). Container queries for reusable components that render in different contexts.

```css
/* Container query setup */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card { flex-direction: row; }
  .card-image { width: 40%; }
}

@container card (max-width: 399px) {
  .card { flex-direction: column; }
  .card-image { width: 100%; }
}
```

## Fluid Typography

```css
/* clamp(min, preferred, max) — no breakpoints needed */
:root {
  --text-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
  --text-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --text-lg: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
  --text-xl: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
  --text-2xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
  --text-3xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
}

h1 { font-size: var(--text-3xl); }
p { font-size: var(--text-base); }
```

## Mobile-First Strategy

Base styles = mobile. Layer up with `min-width` breakpoints: 640px (sm), 1024px (md), 1280px (lg).

## Responsive Images

Use `srcset` + `sizes` for resolution switching, `<picture>` + `<source media>` for art direction. Always `loading="lazy"` below fold.

## CSS Grid Patterns

Use `repeat(auto-fit, minmax(250px, 1fr))` for breakpoint-free responsive grids. Sidebar: fixed + `minmax(0, 1fr)` behind a media query.

## Gotchas

- **Viewport units on mobile**: `100vh` includes browser chrome; use `100dvh` (dynamic viewport height) instead
- **Container query support**: Baseline 2023 -- add `@supports (container-type: inline-size)` fallback for older browsers
- **Touch targets**: Minimum 44x44px (WCAG 2.5.5); use `min-height: 44px; min-width: 44px` on interactive elements
- **Horizontal scroll**: Always test with `overflow-x: hidden` on body during dev to catch overflow; use `max-width: 100%` on images/videos
- **Font loading shift**: Use `font-display: swap` and `size-adjust` to minimize CLS from web font loading

## Cross-References

- **frontend:tailwind-design-system** -- Tailwind responsive utilities, breakpoint config, container queries plugin
- **frontend:accessibility-testing** -- Touch target compliance, responsive WCAG requirements