Responsive & Adaptive Design
Build layouts that work everywhere - mobile-first design, fluid typography, CSS Grid and Flexbox patterns, container queries, and practical breakpoint strategy.
skill: Responsive & Adaptive Design category: Design tags: [Responsive Design, CSS Grid, Flexbox, Mobile First, Breakpoints] readingTime: 4
Mobile-first is the correct starting order - not a preference. Designing for 320px first forces prioritization; everything on a small screen must earn its place. Scaling up (adding complexity for larger screens) is easier than scaling down (removing complexity from an over-designed desktop layout). Modern CSS (Grid, clamp(), container queries) makes many breakpoints unnecessary.
Workflow
- Design mobile-first with progressive enhancementMobile-first ensures the core experience works on the most constrained device. Progressive enhancement adds complexity only where screen real estate allows.
- Use fluid typography and spacing with clamp()Fluid typography scales proportionally between screen sizes - no jarring jumps at breakpoints. clamp(min, preferred, max) provides a smooth scale.
- Build layouts with CSS GridCSS Grid is the most powerful layout tool - it handles 2D layouts (rows AND columns) with precise control, automatic placement, and responsive behavior without JavaScript.
- Apply container queries for component responsivenessContainer queries (2023 baseline, all modern browsers) style elements based on their container's size - not the viewport. This enables truly reusable components that adapt wherever they're placed.
- Define a practical breakpoint strategyToo many breakpoints create maintenance burden. Too few leave awkward intermediate layouts. A 4-tier system covers 95% of cases.
Output Format
Responsive: mobile-first min-width breakpoints, fluid typography with clamp(14px,..vw..,18px), CSS Grid auto-fit minmax for no-breakpoint card grids, container queries for component-relative sizing, and 4-tier breakpoint (640/768/1024/1280).
@media (min-width: 40em) { /* tablet+ */ }
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem)
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
.wrapper { container-type: inline-size }
@container (min-width: 400px) { .card { flex-direction: row } }Examples
Edge Cases & Gotchas
- Container queries browser support - Container queries are supported in all modern browsers since Chrome 105, Firefox 110, Safari 16 (2023). For older browsers, provide a workable fallback using Flexbox/Grid without container conditions.
- vh on mobile Safari - 100vh on mobile Safari includes the browser chrome (address bar) - content gets cropped. Use 100dvh (dynamic viewport height, supported 2023+) or svh (small viewport height = minimum size) for full-height elements.
- Zoom and text resize - WCAG requires all content and functionality to be usable at 200% zoom. Test by using browser zoom - layouts must not require horizontal scrolling. Use em-based breakpoints (not px) to scale with text zoom.
- Print responsive design - Responsive design should include @media print. Remove navigation, sidebars, ads. Black text on white background. Convert relative widths to 100% for print. Show full URLs after links: a[href]::after { content: " (" attr(href) ")"; }
When to Break These Rules
- Use adaptive design (serving different HTML to different devices) instead of responsive CSS when the mobile and desktop experiences are fundamentally different - different content, different navigation patterns, different user goals.
- Defer container queries for teams targeting older browsers (enterprise products with strict browser support requirements) - use Flexbox's natural reflowing behavior as the responsive mechanism.
Reference Files
https://web.dev/learn/design/https://utopia.fyi/