22 patterns in this category — each with its illustration, what it is, and the fields that matter when you build or review one. Part of the UX pattern catalogue; the raw, agent-readable version is ux-pattern-catalogue/responsive-patterns.json.
Write base CSS for the smallest screen, then add @media (min-width) queries to enhance for larger viewports. Mobile-first forces content prioritization — you start with what matters most and add enhancements, rather than hiding content on mobile.
Add breakpoints where the design breaks, not at arbitrary device widths. If a layout looks wrong at 620px, add a breakpoint at 620px. Device-based breakpoints (iPhone, iPad) become outdated as new devices launch.
Start with a functional baseline that works everywhere (semantic HTML + core CSS), then layer on enhancements (Grid, animations, WebGL) for capable browsers. Every user gets a working experience; modern browsers get a richer one.
Four standard viewport breakpoints cover the vast majority of devices: 360px (small mobile minimum), 768px (tablet/large phone landscape), 1024px (desktop), and 1440px (large desktop/content max-width). Use these as starting points, then adjust based on content needs.
Component behavior depends on its container width, not the viewport. A card component adapts differently in a sidebar (300px) vs main content (800px) using the same code. Container queries make components truly reusable across layout contexts.
Use `@media (pointer: fine)` to detect mouse/stylus input and `@media (hover: hover)` to detect hover capability. This lets you add hover effects only on devices that support them, and adjust target sizes based on input precision.
Use `clamp(min, preferred, max)` for font sizes that scale smoothly between breakpoints without media queries. The preferred value uses a `rem + vw` formula to create fluid scaling. Eliminates jarring font-size jumps at breakpoints.
Apply the same `clamp()` approach to spacing (margins, padding, gaps) so layouts breathe proportionally to viewport width. Tight spacing on mobile, generous spacing on desktop — without media query jumps.
Optimal line length is 45-75 characters for body text (66ch ideal per typographic research). Lines too long reduce reading comprehension; lines too short cause excessive eye movement. Use `max-width` in `ch` units to constrain.
Provide multiple image resolutions and let the browser choose the best one based on viewport width and device pixel ratio. The `srcset` attribute lists available widths; `sizes` tells the browser how wide the image renders at each breakpoint.
The `<picture>` element lets you serve different image crops or formats per breakpoint (art direction). A wide panoramic hero on desktop can become a square crop on mobile — different compositions optimized for each viewport.
Always set `aspect-ratio` or explicit `width`/`height` on images and videos to prevent Cumulative Layout Shift (CLS). Without dimensions, the browser can't reserve space before the image loads, causing content to jump.
Below-fold images use `loading="lazy"` to defer loading until they're near the viewport. Above-fold and LCP (Largest Contentful Paint) images must NEVER be lazy-loaded — this delays the critical rendering path and causes visible pop-in.
A CSS Grid that automatically adjusts column count based on available space — no media queries needed. Cards flow into as many columns as fit, with a minimum card width. The simplest responsive card layout.
A flexbox layout where items wrap to the next line when they don't fit. Best for 1D collections of varying-width items like tags, buttons, or navigation items. Items maintain their natural width.
Use `margin-inline`, `padding-block`, `border-inline-start` instead of physical properties like `margin-left`, `padding-top`. Logical properties automatically adapt to RTL (`dir="rtl"`) and vertical writing modes without additional CSS.
A main content area with a sidebar that collapses below the content on mobile. Uses CSS Grid or Flexbox with a breakpoint to switch from side-by-side to stacked layout.
Elements stack vertically on mobile and arrange horizontally on wider viewports. The most common responsive layout shift — used for header layouts, form fields, card content, and action button groups.
Navigation adapts across three breakpoints: horizontal top bar on desktop (1024px+), condensed top bar or collapsible sidebar on tablet (768px-1023px), and bottom tab bar or hamburger drawer on mobile (<768px). Bottom tab bar is preferred for primary actions — it's in the thumb zone.
Show as many nav items as fit in the available space; overflow the rest into a "More" dropdown. The nav adapts dynamically to any width without needing specific breakpoints. Used by Google and many responsive web apps.
A navigation panel that slides in from the side of the viewport, overlaying or pushing the main content. The standard mobile navigation pattern for apps with many sections. Triggered by a hamburger icon.
Tables are inherently wide and overflow on mobile. Three adaptation strategies: horizontal scroll (simplest), card transformation (each row becomes a card), or column prioritization (hide low-priority columns). Choose based on data density.