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

1. Mobile First: Start coding for the smallest screen (< 640px). Add min-width queries to enhance for larger screens.
2. Fluid: Use relative units (%, rem, vw) and fluid clamp scales for type/spacing.
3. Adaptive: Use Container Queries (@container) for high-reuse components.
4. Layout: Use Grid for 2D layouts and Flexbox for 1D alignment.

Instructions