Responsive Design

Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.

When to Use This Skill

• Implementing mobile-first responsive layouts

• Component-level responsiveness (Container Queries)

• Fluid typography and spacing scales (clamp)

• Building complex layouts with CSS Grid/Flexbox

• Responsive Images and Media handling

• Designing adaptive navigation

Workflow

• Mobile First: Start coding for the smallest screen (< 640px). Add min-width queries to enhance for larger screens.

• Fluid: Use relative units (% , rem , vw ) and fluid clamp scales for type/spacing.

• Adaptive: Use Container Queries (@container ) for high-reuse components.

• Layout: Use Grid for 2D layouts and Flexbox for 1D alignment.

Instructions

1. Modern Breakpoint Strategy (Mobile First)

Start with base styles (mobile), then override up.

/* Base: Mobile */ .card { padding: 1rem; }

/* sm: Tablet/Landscape Phone */ @media (min-width: 640px) { .card { padding: 1.5rem; } }

/* md: Tablet */ @media (min-width: 768px) { ... }

/* lg: Laptop */ @media (min-width: 1024px) { ... }

2. Container Queries (Component-Level)

Make components responsive to their container, not the viewport.

.card-container { container-type: inline-size; container-name: card; }

@container card (min-width: 400px) { .child-element { display: flex; } /* Change layout based on container width */ }

3. Fluid Typography & Spacing

Use clamp(min, preferred, max) to scale smoothly without breakpoints.

:root { /* Scales from 1rem to 1.5rem between 320px and 1280px viewports */ --text-fluid: clamp(1rem, 0.9rem + 0.5vw, 1.5rem); }

4. Common Patterns

• Grid Auto-Fit: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) for automatic card grids.

• Responsive Images: Use <picture> or srcset to serve smaller images to mobile.

• Viewport Units: Use dvh (dynamic viewport height) for mobile 100% height to avoid address bar issues.

Resources

• Layout Patterns

• Responsive Components