1. Adaptive vs Responsive

Responsive resizes; **adaptive** respects posture (folded/flat, split screen), input modes (touch, pen, kb/mouse), and task density. It’s about intent, not just breakpoints.
- Posture & inputs
- Task density
- Layout intent
Beyond breakpoints: posture, input modes, and multi-pane patterns.
Responsive resizes; **adaptive** respects posture (folded/flat, split screen), input modes (touch, pen, kb/mouse), and task density. It’s about intent, not just breakpoints.
Build components that respond to their own container size with container queries. Use sub-grid so nested layouts keep a consistent rhythm.
On large screens and foldables, adopt multi-pane navigation and resizable panels. Persist preferences so the app remembers the user’s layout.
Use `clamp()` for fluid type/spacing. Keep 45–75 characters per line; extra width should add **columns** or **panes**, not stretch a paragraph to the horizon.
Test split view on foldables, RTL languages, and browser zoom at 125–150%. These are where overflow and clipping bugs appear.
Account for safe-area insets, adjust hit targets for touch vs mouse, and expose keyboard shortcuts where appropriate. Adaptive design is empathy at layout scale.