Responsive Design & Media Queries
Build layouts that adapt to any screen size using media queries, fluid grids, and responsive units.
Step 1: What is Responsive Design?
Responsive design is the practice of building one codebase that adapts gracefully to every screen size — from a 320px phone to a 2560px ultra-wide monitor.
The foundation is the viewport meta tag, which tells the browser to match the device width instead of defaulting to a 980px-wide desktop layout:
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
Without this tag, mobile browsers zoom out to fit the full desktop layout, making text unreadable.
Key terms:
- Viewport — the visible area of a web page in the browser window
- Breakpoint — a specific viewport width where the layout changes (e.g. 768px)
- Media query — a CSS rule that applies styles only when a condition is met (e.g. screen width ≥ 768px)
- Mobile-first — writing base styles for small screens, then adding complexity via
min-widthqueries
About This Lab
How It Works
- 1 Read each step's explanation of responsive design concepts
- 2 Drag the resizable preview to see layouts adapt
- 3 Toggle between device sizes
- 4 Write your own media queries
- 5 Complete the quiz to test your understanding
More Labs in Web Development
CSS Box Model
Web DevelopmentVisualize content, padding, border, and margin layers with an interactive box model explorer.
CSS Grid Layout
Web DevelopmentBuild two-dimensional layouts with CSS Grid — define rows, columns, and place items with interactive controls.
Intro to HTML
Web DevelopmentLearn the building blocks of the web — write your first HTML elements and see them render in real time.