Responsive Patterns

Modern responsive design patterns using Container Queries, fluid typography, and mobile-first strategies for React applications (2026 best practices).

Overview

Building reusable components that adapt to their container
Implementing fluid typography that scales smoothly
Creating responsive layouts without media query overload
Building design system components for multiple contexts
Optimizing for variable container sizes (sidebars, modals, grids)

Core Concepts

Container Queries vs Media Queries

Feature	Media Queries	Container Queries
Responds to	Viewport size	Container size
Component reuse	Context-dependent	Truly portable
Browser support	Universal	Baseline 2023+
Use case	Page layouts	Component layouts

CSS Patterns

See rules/css-patterns.md for complete CSS examples: container queries, cqi/cqb units, fluid typography with clamp(), mobile-first breakpoints, CSS Grid patterns, and scroll-queries.

Key patterns covered: Container Query basics, Container Query Units (cqi/cqb), Fluid Typography with clamp(), Container-Based Fluid Typography, Mobile-First Breakpoints, CSS Grid Responsive Patterns, Container Scroll-Queries (Chrome 126+).

React Patterns

See rules/react-patterns.md for complete React examples: ResponsiveCard component, Tailwind container queries, useContainerQuery hook, and responsive images.

Key patterns covered: Responsive Component with Container Queries, Tailwind CSS Container Queries, useContainerQuery Hook, Responsive Images Pattern.

Accessibility Considerations

/* IMPORTANT: Always include rem in fluid typography */
/* This ensures user font preferences are respected */

/* ❌ WRONG: Viewport-only ignores user preferences */
font-size: 5vw;

/* ✅ CORRECT: Include rem to respect user settings */
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);

/* User zooming must still work */
@media (min-width: 768px) {
  /* Use em/rem, not px, for breakpoints in ideal world */
  /* (browsers still use px, but consider user zoom) */
}

Anti-Patterns (FORBIDDEN)

/* ❌ NEVER: Use only viewport units for text */
.title {
  font-size: 5vw; /* Ignores user font preferences! */
}

/* ❌ NEVER: Use cqw/cqh (use cqi/cqb instead) */
.card {
  padding: 5cqw; /* cqw = container width, not logical */
}
/* ✅ CORRECT: Use logical units */
.card {
  padding: 5cqi; /* Container inline = logical direction */
}

/* ❌ NEVER: Container queries without container-type */
@container (min-width: 400px) {
  /* Won't work without container-type on parent! */
}

/* ❌ NEVER: Desktop-first media queries */
.element {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
  .element {
    grid-template-columns: 1fr; /* Overriding = more CSS */
  }
}

/* ❌ NEVER: Fixed pixel breakpoints for text */
@media (min-width: 768px) {
  body { font-size: 18px; } /* Use rem! */
}

/* ❌ NEVER: Over-nesting container queries */
@container a {
  @container b {
    @container c {
      /* Too complex, reconsider architecture */
    }
  }
}

Browser Support

Feature	Chrome	Safari	Firefox	Edge
Container Size Queries	105+	16+	110+	105+
Container Style Queries	111+	❌	❌	111+
Container Scroll-State	126+	❌	❌	126+
cqi/cqb units	105+	16+	110+	105+
clamp()	79+	13.1+	75+	79+
Subgrid	117+	16+	71+	117+

Rules

Each category has individual rule files in rules/ loaded on-demand:

Category	Rule	Impact	Key Pattern
CSS	`rules/css-patterns.md`	HIGH	Container queries, cqi/cqb, fluid typography, grid, scroll-queries
React	`rules/react-patterns.md`	HIGH	Container query components, Tailwind, useContainerQuery, responsive images
PWA	`rules/pwa-service-worker.md`	HIGH	Workbox caching strategies, VitePWA, update management
PWA	`rules/pwa-offline.md`	HIGH	Offline hooks, background sync, install prompts
Animation	`rules/animation-motion.md`	HIGH	Motion presets, AnimatePresence, View Transitions
Animation	`rules/animation-scroll.md`	MEDIUM	CSS scroll-driven animations, parallax, progressive enhancement

Total: 6 rules across 4 categories

Key Decisions

Decision	Option A	Option B	Recommendation
Query type	Media queries	Container queries	Container for components, Media for layout
Container units	cqw/cqh	cqi/cqb	cqi/cqb (logical, i18n-ready)
Fluid type base	vw only	rem + vw	rem + vw (accessibility)
Mobile-first	Yes	Desktop-first	Mobile-first (less CSS, progressive)
Grid pattern	auto-fit	auto-fill	auto-fit for cards, auto-fill for icons

Related Skills

design-system-starter - Building responsive design systems
ork:performance - CLS, responsive images, and image optimization
ork:i18n-date-patterns - RTL/LTR responsive considerations

Capability Details

container-queries

Keywords: @container, container-type, inline-size, container-name Solves: Component-level responsive design

fluid-typography

Keywords: clamp(), fluid, vw, rem, scale, typography Solves: Smooth font scaling without breakpoints

responsive-images

Keywords: srcset, sizes, picture, art direction Solves: Responsive images for different viewports

mobile-first-strategy

Keywords: min-width, mobile, progressive, breakpoints Solves: Efficient responsive CSS architecture

grid-flexbox-patterns

Keywords: auto-fit, auto-fill, subgrid, minmax Solves: Responsive grid and flexbox layouts

container-units

Keywords: cqi, cqb, container width, container height Solves: Sizing relative to container dimensions

References

references/container-queries.md - Container query patterns
references/fluid-typography.md - Accessible fluid type scales
scripts/responsive-card.tsx - Responsive card component

responsive-patterns