Responsive web design means one HTML document adapts to phone, tablet, and desktop widths using fluid layouts and media queries.
Mobile-first pattern
- Default CSS targets small screens (single column, stacked nav).
@media (min-width: 48rem)adds columns, side-by-side nav, larger type.
Checklist
- Viewport meta in
head(see skeleton lesson). - Avoid fixed pixel widths on main text containers.
- Touch targets ~44px minimum height for buttons on mobile.
- Test with DevTools device mode and a real phone when possible.
Practice
Resize the preview or narrow the window: sidebar moves below content on small screens, beside content on wide screens.
Important interview questions and answers
- Q: What does mobile-first mean?
A: Base styles target small viewports; min-width media queries add enhancements for larger screens. - Q: `max-width` vs `min-width` queries?
A: `min-width` adds rules as the viewport grows (mobile-first); `max-width` subtracts as it shrinks (desktop-first). - Q: Why not ship separate m. sites?
A: One URL reduces maintenance; responsive CSS adapts layout while keeping content unified.
Challenge
Add a tablet breakpoint
- Add
@media (min-width: 30rem)with a subtle background change onmain.
Done when: you can see two visual steps as the preview widens.