Responsive Design: Media Queries & Mobile-First Layout
Write CSS that adapts to any screen size using mobile-first thinking, min-width media queries, and relative units.
What you'll learn
- Write a mobile-first stylesheet that adds complexity via min-width media queries
- Use relative units (%, em, rem) instead of fixed pixels where appropriate
- Explain why designing for small screens first tends to produce simpler, more robust CSS
Prerequisites
Explanation
A page that looks great on a laptop can be genuinely unusable on a phone — text too small to read, layouts too wide to fit, buttons too close together to tap accurately. Responsive design is the practice of writing CSS that adapts to whatever screen it lands on, instead of assuming one fixed size.
The Viewport Meta Tag
Before any CSS technique matters, mobile browsers need one line in <head>:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Without it, many mobile browsers render the page at a fake desktop-like width (often around 980px) and then zoom out to fit the screen, making everything tiny and defeating any responsive CSS underneath. This tag tells the browser to use the device's actual width as the layout width instead.
Mobile-First
Mobile-first means writing your base, un-wrapped CSS rules for the smallest, simplest case — a narrow screen, usually a single stacked column — and then layering in exceptions for larger screens as content genuinely needs them. The alternative, desktop-first, writes the complex layout first and then tries to unwind it back down for small screens, which tends to produce more overrides and messier CSS overall. Starting simple and adding complexity, rather than starting complex and subtracting it, is usually the easier direction to reason about.
Media Queries
A media query wraps a block of CSS in a condition, applying it only when that condition is true:
@media (min-width: 600px) {
.stack {
flex-direction: row;
}
}
min-width means "apply this when the viewport is at least this wide" — the natural fit for mobile-first, since your base rules already describe the narrow case, and each media query only ever adds behavior for wider viewports. The specific pixel value where a design changes is called a breakpoint. Good breakpoints are chosen by watching your own content — the point where a line of text gets awkwardly long, or a row of items starts feeling cramped — rather than by targeting specific phone or tablet models, which change constantly and vary widely even within a single "phone" category.
Relative Units
Pixels (px) are a fixed, absolute unit. Several other units scale relative to something else, which is often exactly what responsive design wants:
%— relative to the parent element's corresponding size.em— relative to the font size of the current element (or, for font-size itself, the parent's font size).rem— relative to the root (<html>) element's font size, regardless of nesting — often the most predictable of the three for consistent spacing and type scales.vw/vh— relative to 1% of the viewport's width or height.
Using rem for font sizes in particular respects a visitor's own browser font-size preference — something a fixed px value overrides and ignores, which matters for readability and accessibility.
Combine these ideas — a viewport meta tag, mobile-first base styles, min-width media queries at content-driven breakpoints, and relative units where they make sense — and a single stylesheet can comfortably serve a phone, a tablet, and a desktop monitor without three separate designs.
Example
A mobile-first stacked layout that switches to a row once the viewport reaches 600px wide.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-size: 1rem;
font-family: sans-serif;
}
.stack {
display: flex;
flex-direction: column;
gap: 10px;
}
.stack > div {
background: #eee;
padding: 1em;
}
@media (min-width: 600px) {
.stack {
flex-direction: row;
}
}
</style>
</head>
<body>
<div class="stack">
<div>Panel one</div>
<div>Panel two</div>
<div>Panel three</div>
</div>
</body>
</html>Try it yourself
Change min-width: 600px to min-width: 300px and press Run — imagine this rule now kicking in on much smaller screens.
Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.
Guided exercise
Guided exercise
Add a media query @media (min-width: 600px) { .stack { flex-direction: row; } } below the existing rule, so wider screens switch from a stacked column to a row.
Checks: A min-width: 600px media query sets .stack to row · plus 1 hidden check
Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.
Stuck? Get a hint.
Independent exercise
Independent exercise
Build a mobile-first nav: base .nav is display: flex; flex-direction: column; with a gap using a relative unit like rem. Add @media (min-width: 768px) { .nav { flex-direction: row; } } so it becomes a row on wider screens.
Checks: Base .nav rule is a column flex container · At least one relative unit is used · plus 1 hidden check
Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.
Stuck? Get a hint.
Common mistakes
- Writing desktop-first CSS with max-width overrides for mobile, which tends to produce more overrides and a messier cascade than starting mobile-first with min-width.
- Forgetting the <meta name="viewport" content="width=device-width, initial-scale=1"> tag, which makes mobile browsers render at a fake, zoomed-out desktop width.
- Hardcoding pixel font sizes everywhere instead of using rem, which ignores a visitor's own browser font-size preference and hurts readability.
- Picking breakpoints based on specific device widths instead of the point where your own content actually starts to look cramped or awkward.
Knowledge check
Takeaway
Responsive design isn't a separate skill bolted onto CSS — it's writing simple mobile-first rules first, then layering in min-width media queries as the canvas grows.
Summary
Responsive pages start with a viewport meta tag and mobile-first base styles describing the small-screen case, then use min-width media queries to add layout changes at content-driven breakpoints. Relative units like rem, em, and percentages scale more gracefully than fixed pixels, especially for text sizing and accessibility.
References
Your notes
Notes save automatically.
Finished this lesson?
Mark it complete to track your progress and schedule a future review.
AI tutor
The optional AI tutor isn't enabled in this deployment. All lessons, exercises, quizzes, and search work fully without it.