Skip to main content
UI/UX patterns critical

Responsive Design Best Practices

Breakpoints, mobile-first approach, container queries, fluid typography, responsive images, and modern CSS layout techniques based on MDN, web.dev, Smashing Magazine, and Tailwind CSS.

Difficulty
intermediate
Read time
1 min read
Version
v1.0.0
Confidence
established
Last updated

Quick Reference

Use mobile-first with min-width media queries. Breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl). Use container queries for component-level responsiveness. Fluid typography: clamp(1rem, 0.5rem + 1vw, 1.25rem). Always set width/height on images to prevent CLS. Use srcset/sizes for responsive images, picture element for art direction.

Use When

  • Building responsive layouts
  • Setting up breakpoints
  • Creating mobile-first stylesheets
  • Implementing fluid typography
  • Optimizing images for different screen sizes

Skip When

  • Building fixed-width print layouts
  • Creating email templates (limited CSS support)

Responsive Design Best Practices

Breakpoints, mobile-first approach, container queries, fluid typography, responsive images, and modern CSS layout techniques based on MDN, web.dev, Smashing Magazine, and Tailwind CSS.

Tags

responsive mobile-first breakpoints container-queries fluid-typography media-queries

Discussion