Responsive Design Patterns

Also Known As

TL;DR

Explanation

Common responsive patterns: Mostly Fluid (multi-column grid collapses to single column on small screens), Column Drop (columns stack vertically as viewport narrows), Layout Shifter (different layouts at different breakpoints — not just stacking), Tiny Tweaks (minor adjustments — font size, padding — at each breakpoint), Off Canvas (navigation hidden off-screen on mobile, revealed by tap). CSS Grid and Flexbox handle most patterns without media queries using auto-fill, minmax(), and flex-wrap. Container queries (CSS 2023) enable components to respond to their container size, not the viewport.

Common Misconception

Why It Matters

Common Mistakes

• Desktop-first with max-width overrides — complex, bloated CSS for mobile.
• Fixed pixel breakpoints — use content breakpoints (where the design breaks) not device sizes.
• Hiding content on mobile with display:none — content is still downloaded.
• Not testing intermediate viewport sizes — most responsive bugs occur between defined breakpoints.

Code Examples

/* Desktop-first — overrides everywhere for mobile: */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 768px) { .grid { grid-template-columns: 1fr; gap: 1rem; } }
@media (max-width: 480px) { .grid { gap: 0.5rem; } }
/* Mobile gets: all desktop CSS + overrides = more code */

/* Mobile-first — progressive enhancement: */
.grid { display: grid; gap: 0.5rem; }
@media (min-width: 480px) { .grid { gap: 1rem; } }
@media (min-width: 768px) {
    .grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
/* Mobile gets only what it needs */

/* Container queries — component-driven responsiveness: */
@container (min-width: 400px) {
    .card { display: flex; flex-direction: row; }
}

References

• ↗ https://web.dev/articles/responsive-web-design-basics

Tags

Related Terms