Quiz Entry - updated: 2026.07.14
What is a responsive layout?
A responsive layout is a single design that reflows at width-based breakpoints so it stays usable from phone to desktop.
W3.CSS breakpoints:
| Size | Width | Typical Device |
|---|---|---|
| Small (s) | < 601px | Phone |
| Medium (m) | 601px - 992px | Tablet, small laptop |
| Large (l) | > 992px | Laptop, desktop |
Key concept:
- Single layout that transforms based on viewport width
- Content reflows (e.g., columns stack vertically on mobile)
- Uses the available space efficiently on each device
Without responsive design: Desktop site on phone = tiny text, horizontal scrolling, poor UX.
Go deeper:
MDN — Responsive design — how media queries, breakpoints, viewport meta and flexible layouts fit together.
Wikipedia — Responsive web design — origins, the "content is like water" principle, and side-by-side desktop/mobile layout figures.