One App Fits All: Building Responsive Experiences in React
summary
Demonstrates concrete techniques: fluid typography with clamp and REM scale, responsive layouts using container queries instead of viewport breakpoints, and device-aware interactions with the hover/pointer media features and prefers-reduced-motion. Builds a React feed and a responsive post card that switches layout without media queries, implements an overflow filter menu by measuring elements with ResizeObserver and a measurement hook, and shows keyboard, mouse, and touch fallbacks that actually work.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 1:13Responsiveness meaning
- 2:14Fluid typography
- 4:42Fixed elements adaptation
- 6:47Media queries
- 9:59Container queries
- 14:21Interactions with hover
- 17:35Pointer accessibility
- 19:23Design system behaviors
- 20:30Fluid layouts with Grid
- 22:34Reduced motion preferences
- 24:20Dynamic overflow handling
- 32:10Summary
related talks
53mDeveloping Mobile Friendly Web Apps with React and Bootstrap
23mBeyond Responsive Design: Building Mobile-Optimized Websites in React
28mBack to React: The Story of Two Apps
29mSquishy Pixels
25mReactive Responsive Design
50mNavigating the React Ecosystem
15mReact Best Practices in 15 Slides
49mPanel 4: Responsive Layout