Responsive Design & Media Queries

What Is Responsive Design?

Responsive design means building web pages that adapt to any screen size — from 320px phones to 2560px ultrawide monitors. Instead of building separate sites for mobile and desktop, one codebase handles everything.

The three pillars:

Flexible layouts — use relative units (%, fr, vw) instead of fixed pixels.
Media queries — apply different styles at different screen sizes.
Flexible media — images and videos scale within their containers.

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

/* Flexible media */
img {
  max-width: 100%;
  height: auto;
}

The Viewport Meta Tag

Before anything else, every responsive page needs this in <head>:

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

Without it, mobile browsers render the page at desktop width (typically 980px) and zoom out. The page looks tiny and unresponsive.

Without viewport meta:
+--------+
| Desktop|
| layout |  <- rendered at 980px, then shrunk
| zoomed |
| out    |
+--------+

With viewport meta:
+--------+
|        |
| Mobile |  <- rendered at actual device width
| layout |
|        |
+--------+

Mobile-First Approach

Mobile-first means writing base styles for mobile, then adding complexity for larger screens using min-width media queries.

/* Base styles = mobile (no media query) */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

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

/* Desktop and up */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Why mobile-first?

Mobile is the constraint. Start with the simplest layout, then enhance.
Progressive enhancement. Older/simpler devices get the base experience.
Smaller mobile CSS. Mobile devices don't download desktop styles.
Forces prioritization. You decide what's essential for the smallest screen.

The alternative — desktop-first with max-width queries — works but leads to more overrides and larger stylesheets.

/* Desktop-first (not recommended) */
.grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1023px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .grid { grid-template-columns: 1fr; }
}

Media Queries

Syntax

@media (condition) {
  /* styles applied when condition is true */
}

Width-Based Queries

/* Min-width: applies at this width AND above */
@media (min-width: 768px) { }

/* Max-width: applies at this width AND below */
@media (max-width: 767px) { }

/* Range (modern syntax — Chrome 104+, Firefox 63+, Safari 16.4+) */
@media (768px <= width <= 1023px) { }

/* Range (traditional) */
@media (min-width: 768px) and (max-width: 1023px) { }

Common Breakpoints

There's no universally correct set of breakpoints. Here are common ones:

/* Small phones */
@media (min-width: 320px) { }

/* Large phones */
@media (min-width: 480px) { }

/* Tablets */
@media (min-width: 768px) { }

/* Laptops */
@media (min-width: 1024px) { }

/* Desktops */
@media (min-width: 1280px) { }

/* Large screens */
@media (min-width: 1536px) { }

A minimal, practical set:

:root {
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* Can't use variables in media queries (yet), so use values directly */
@media (min-width: 640px)  { /* sm */ }
@media (min-width: 768px)  { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }

Beyond Width: Other Media Features

/* Orientation */
@media (orientation: portrait) { }
@media (orientation: landscape) { }

/* Hover capability (touch vs mouse) */
@media (hover: hover) { }    /* device has hover (mouse) */
@media (hover: none) { }     /* device has no hover (touch) */

/* Pointer precision */
@media (pointer: coarse) { }  /* touch screen */
@media (pointer: fine) { }    /* mouse */

/* Preferred color scheme */
@media (prefers-color-scheme: dark) { }
@media (prefers-color-scheme: light) { }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) { }

/* High contrast / forced colors */
@media (forced-colors: active) { }

/* Print styles */
@media print { }

/* Resolution / pixel density */
@media (min-resolution: 2dppx) { }  /* retina screens */

Combining Media Queries

/* AND — both conditions must be true */
@media (min-width: 768px) and (orientation: landscape) { }

/* OR — either condition */
@media (min-width: 768px), (orientation: landscape) { }

/* NOT — negate */
@media not (hover: hover) { }

/* Practical: hover styles only on devices that support hover */
@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background: #2563eb;
  }
}

Fluid Typography

Instead of jumping between fixed font sizes at breakpoints, fluid typography scales smoothly.

The clamp() Function

/* clamp(minimum, preferred, maximum) */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* minimum: 1.5rem (24px) */
  /* preferred: 4vw (scales with viewport) */
  /* maximum: 3rem (48px) */
}

p {
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
}

Viewport width:    320px    768px    1200px    1920px
Font size (h1):    24px     30.7px   48px      48px
                   ^min              ^max      ^capped at max

Fluid Typography Scale

:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  --text-2xl: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --text-3xl: clamp(1.875rem, 1rem + 3.5vw, 3.5rem);
}

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

Fluid Spacing

The same technique works for padding, margins, and gaps:

:root {
  --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --space-lg: clamp(1.5rem, 1rem + 2vw, 3rem);
  --space-xl: clamp(2rem, 1rem + 4vw, 5rem);
}

.section {
  padding: var(--space-xl) var(--space-md);
}

Responsive Images

Basic Responsive Image

img {
  max-width: 100%;  /* never wider than container */
  height: auto;     /* maintain aspect ratio */
  display: block;   /* remove bottom gap */
}

srcset for Resolution Switching

Serve different image files based on device pixel ratio or viewport width:

<!-- Resolution switching: same image, different sizes -->
<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w,
    photo-1600.jpg 1600w
  "
  sizes="
    (min-width: 1024px) 800px,
    (min-width: 768px) 50vw,
    100vw
  "
  alt="A landscape photo"
>

How sizes works:

On screens >= 1024px: image displays at 800px wide.
On screens >= 768px: image displays at 50% of viewport.
Otherwise: image displays at 100% of viewport.

The browser picks the best srcset file based on sizes and device pixel ratio.

Art Direction with picture

<!-- Different images for different contexts -->
<picture>
  <source media="(min-width: 1024px)" srcset="hero-wide.jpg">
  <source media="(min-width: 768px)" srcset="hero-medium.jpg">
  <img src="hero-mobile.jpg" alt="Hero image">
</picture>

Use <picture> when you need different image crops or compositions at different breakpoints — not just different sizes.

Modern Image Formats

<picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="Photo">
</picture>

Format comparison (same visual quality):
JPEG:  100KB
WebP:   65KB  (35% smaller)
AVIF:   45KB  (55% smaller)

Responsive Background Images

.hero {
  background-image: url('hero-mobile.jpg');
  background-size: cover;
  background-position: center;
}

@media (min-width: 768px) {
  .hero {
    background-image: url('hero-tablet.jpg');
  }
}

@media (min-width: 1024px) {
  .hero {
    background-image: url('hero-desktop.jpg');
  }
}

/* Resolution-based (retina) */
@media (min-resolution: 2dppx) {
  .hero {
    background-image: url('[email protected]');
  }
}

Container Queries

Media queries respond to the viewport width. Container queries respond to a container element's width. This is a game-changer for component-based design.

Setup

/* Define the container */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* Query the container */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 150px 1fr;
  }
}

@container card (min-width: 600px) {
  .card {
    grid-template-columns: 200px 1fr auto;
  }
}

Narrow container (< 400px):
+-------------+
| Image       |
| Title       |
| Description |
+-------------+

Medium container (400-599px):
+------+-----------+
| Img  | Title     |
|      | Desc      |
+------+-----------+

Wide container (>= 600px):
+------+-----------+--------+
| Img  | Title     | Action |
|      | Desc      |        |
+------+-----------+--------+

Container Query Units

.card-title {
  font-size: clamp(1rem, 3cqi, 1.5rem);
  /* cqi = 1% of container's inline size */
}

Unit	Meaning
cqw	1% of container width
cqh	1% of container height
cqi	1% of container inline size
cqb	1% of container block size

Container Queries vs Media Queries

Media Query:
  "When the VIEWPORT is 768px wide..."
  → Global. Affects all elements.

Container Query:
  "When THIS COMPONENT'S CONTAINER is 400px wide..."
  → Local. Each instance adapts independently.

A sidebar card and a main-content card can have different layouts at the same viewport width because their containers are different sizes.

Browser support: Chrome 105+, Firefox 110+, Safari 16+, Edge 105+. Safe for production with progressive enhancement.

Responsive Layout Patterns

Pattern 1: Responsive Grid (No Media Queries)

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1rem;
}

Pattern 2: Sidebar + Content

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 250px 1fr;
  }
}

.nav {
  display: flex;
  flex-direction: column;
}

.nav-links {
  display: none; /* hidden on mobile */
}

.nav-toggle {
  display: block; /* hamburger button */
}

@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .nav-links {
    display: flex;
    gap: 1rem;
  }

  .nav-toggle {
    display: none; /* hide hamburger on desktop */
  }
}

Pattern 4: Responsive Typography + Spacing

.hero {
  padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 3vw, 4rem);
}

.hero-title {
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
  line-height: 1.1;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.5rem);
  max-width: 60ch;
}

Pattern 5: Responsive Table

Tables are notoriously hard on mobile. Options:

/* Option 1: Horizontal scroll */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Option 2: Stack rows on mobile */
@media (max-width: 768px) {
  table, thead, tbody, tr, td, th {
    display: block;
  }

  thead {
    display: none; /* hide header on mobile */
  }

  td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
  }
}

<td data-label="Name">John Doe</td>
<td data-label="Email">[email protected]</td>

Pattern 6: Responsive Video

/* 16:9 aspect ratio wrapper */
.video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Touch Targets

Mobile users tap with fingers, not cursors. Minimum touch target size should be 44x44px (Apple) or 48x48px (Google Material Design).

/* Minimum touch target */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  padding: 0.75rem;
}

/* Increase clickable area without changing visual size */
.small-button {
  position: relative;
}

.small-button::after {
  content: '';
  position: absolute;
  inset: -8px;  /* extends tap area by 8px in each direction */
}

/* Form inputs — make them finger-friendly */
input, select, textarea {
  min-height: 44px;
  font-size: 16px; /* prevents iOS zoom on focus */
  padding: 0.5rem;
}

Important: on iOS, inputs with font-size less than 16px trigger an auto-zoom when focused. Always use at least font-size: 16px for form inputs.

Accessibility in Responsive Design

Reduced Motion

Some users experience motion sickness from animations. Respect their preferences:

/* Default: animations on */
.element {
  transition: transform 0.3s ease;
}

/* Reduced motion: disable or minimize animations */
@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
  }

  /* Or reduce rather than remove */
  .element {
    transition-duration: 0.01ms;
  }
}

Dark Mode

/* Light mode (default) */
:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --accent: #3b82f6;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #e5e5e5;
    --accent: #60a5fa;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}

Focus Visibility

/* Only show focus ring for keyboard users */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Remove default for mouse clicks */
:focus:not(:focus-visible) {
  outline: none;
}

Testing Responsive Design

Browser DevTools

Chrome: F12 -> Toggle device toolbar (Ctrl+Shift+M).
Firefox: F12 -> Responsive Design Mode (Ctrl+Shift+M).
Safari: Develop -> Enter Responsive Design Mode.

Testing Checklist

For each breakpoint (320, 375, 768, 1024, 1280, 1440):

[ ] No horizontal scrollbar
[ ] Text is readable without zooming
[ ] Images don't overflow containers
[ ] Navigation is accessible
[ ] Touch targets are at least 44x44px
[ ] Forms are usable
[ ] Modals/overlays are scrollable
[ ] Tables are readable (scroll or stack)
[ ] No overlapping elements
[ ] Footer is visible

Real Device Testing

DevTools simulators aren't perfect. Test on real devices for:

Touch behavior (scrolling, swiping, tapping)
Virtual keyboard interaction
System font sizes (accessibility settings)
Notch/safe area (modern phones)

/* Safe areas for notched phones */
.container {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

Common Responsive Mistakes

Mistake 1: Using px for Everything

/* BAD: fixed sizes don't adapt */
.container { width: 960px; }
.title { font-size: 36px; }

/* GOOD: relative sizes adapt */
.container { max-width: 60rem; width: 100%; }
.title { font-size: clamp(1.5rem, 4vw, 2.25rem); }

Mistake 2: 100vh on Mobile

On mobile browsers, 100vh includes the area behind the URL bar. This causes content to be hidden behind browser chrome.

/* BUG: content hidden behind mobile browser bar */
.hero { height: 100vh; }

/* FIX: use dvh (dynamic viewport height) */
.hero { height: 100dvh; }

/* Fallback for older browsers */
.hero {
  height: 100vh;
  height: 100dvh;
}

100vh on mobile:
+---browser bar---+
|                 |
|   Content gets  |
|   cut off here  |
|                 |
+---nav bar-------+
   ^hidden behind^

100dvh:
+---browser bar---+
|                 |
|   Content fits  |
|   perfectly     |
+---nav bar-------+

Mistake 3: Forgetting landscape phones

/* Phone in landscape can be 740px wide but only 360px tall */
@media (min-width: 768px) {
  .sidebar { position: fixed; height: 100vh; }
}

/* Better: also check height */
@media (min-width: 768px) and (min-height: 500px) {
  .sidebar { position: fixed; height: 100vh; }
}

Mistake 4: Desktop hover effects on mobile

/* BAD: sticky hover on touch devices */
.button:hover { background: blue; }

/* GOOD: hover only on devices that support it */
@media (hover: hover) {
  .button:hover { background: blue; }
}

On touch devices, :hover states can "stick" after tapping, creating confusing visual behavior.

Responsive Units Reference

Unit	Relative To	Best For
%	Parent element	Widths, margins
em	Parent font size	Component-scale spacing
rem	Root font size	Global spacing, typography
vw	1% viewport width	Fluid typography, full-width
vh	1% viewport height	Full-height sections
dvh	1% dynamic viewport height	Mobile full-height
svh	1% smallest viewport height	Stable full-height
lvh	1% largest viewport height	Maximum full-height
ch	Width of "0" character	Max-width for reading
cqi	1% container inline size	Container-responsive sizing

Key Takeaways

Always include <meta name="viewport" content="width=device-width, initial-scale=1">.
Mobile-first: write base styles for mobile, add min-width queries for larger screens.
Use clamp() for fluid typography and spacing that scales smoothly.
Use srcset and sizes for responsive images. Serve modern formats (WebP, AVIF).
Container queries respond to component size, not viewport — essential for reusable components.
Touch targets must be at least 44x44px.
Use 16px minimum font size on form inputs to prevent iOS zoom.
Use 100dvh instead of 100vh for mobile full-height layouts.
Respect prefers-reduced-motion and prefers-color-scheme.
Use @media (hover: hover) to apply hover effects only on devices that support them.
Test on real devices — DevTools simulation misses touch behavior and keyboard interaction.

Found this helpful?

Related Articles

CSS Grid Complete Guide

Flexbox Complete Guide — From Basics to Mastery

Common CSS Mistakes & Solutions

CSS Variables & Custom Properties