Responsive Web Design Overview
Build mobile-first responsive interfaces using modern CSS techniques including Flexbox, Grid, and media queries to create adaptable user experiences.
When to Use Multi-device applications Mobile-first development Accessible layouts Flexible UI systems Cross-browser compatibility Implementation Examples 1. Mobile-First Media Query Strategy / Mobile styles (default) / .container { display: flex; flex-direction: column; padding: 16px; gap: 16px; }
.card { padding: 16px; border-radius: 8px; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
/ Tablet (640px and up) / @media (min-width: 640px) { .container { flex-direction: row; padding: 24px; }
.grid { grid-template-columns: repeat(2, 1fr); }
.card { padding: 24px; } }
/ Desktop (1024px and up) / @media (min-width: 1024px) { .container { max-width: 1200px; margin: 0 auto; padding: 32px; }
.grid { grid-template-columns: repeat(3, 1fr); }
.card { padding: 32px; } }
/ Large Desktop (1280px and up) / @media (min-width: 1280px) { .container { max-width: 1400px; }
.grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
- Flexbox Responsive Navigation
- CSS Grid Responsive Layout / 12-column grid system / .grid-container { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; padding: 16px; }
.grid-item { grid-column: span 12; padding: 16px; background: white; border-radius: 8px; border: 1px solid #e0e0e0; }
/ Mobile: stacked / .header { grid-column: span 12; } .sidebar { grid-column: span 12; } .main { grid-column: span 12; } .footer { grid-column: span 12; }
/ Tablet: 2-column layout / @media (min-width: 768px) { .header { grid-column: span 12; } .sidebar { grid-column: span 3; } .main { grid-column: span 9; } .footer { grid-column: span 12; } }
/ Desktop: 3-column with sidebar / @media (min-width: 1024px) { .header { grid-column: span 12; } .sidebar { grid-column: span 2; } .main { grid-column: span 8; } .aside { grid-column: span 2; } .footer { grid-column: span 12; } }
- Responsive Typography / Fluid typography / html { font-size: 16px; }
h1 { font-size: clamp(24px, 8vw, 48px); line-height: 1.2; }
h2 { font-size: clamp(20px, 5vw, 36px); line-height: 1.3; }
p { font-size: clamp(14px, 2vw, 18px); line-height: 1.6; max-width: 65ch; }
/ Responsive spacing / .container { padding: clamp(16px, 5vw, 48px); margin-left: auto; margin-right: auto; width: 90%; max-width: 1200px; }
/ Responsive images / img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
- Responsive Cards Component
Best Practices Start with mobile-first approach Use flexible units (%, em, rem) Implement CSS Grid and Flexbox Test on real devices Optimize images with srcset Use CSS media queries strategically Consider touch targets on mobile Provide readable text sizes Test accessibility at all sizes Resources MDN CSS Media Queries CSS Flexbox Guide CSS Grid Guide Google Mobile-Friendly Test