What is Responsive Design?
Responsive design means building pages that adapt their layout to fit any screen size — from a small phone to a large desktop monitor — using flexible layouts and media queries.
Media Queries
A media query applies a block of CSS only when certain conditions are met, most commonly a minimum or maximum viewport width.
A Basic Media Query
<style>
.box {
background: steelblue;
color: white;
padding: 20px;
font-size: 16px;
}
@media (max-width: 480px) {
.box {
background: crimson;
font-size: 14px;
}
}
</style>
<div class="box">Resize the preview panel to see this change color below 480px.</div>Mobile-First Design
Mobile-first means writing your base CSS for small screens first, then using min-width media queries to add complexity as the screen grows — generally simpler than starting from desktop and overriding down.
Mobile-First Layout
<style>
.layout {
display: flex;
flex-direction: column;
gap: 10px;
}
.layout div {
background: #eef4fb;
padding: 16px;
}
@media (min-width: 600px) {
.layout {
flex-direction: row;
}
}
</style>
<div class="layout">
<div>Panel A</div>
<div>Panel B</div>
</div>Common Breakpoints (as a starting point)
| Range | Typical Device |
|---|---|
| < 600px | Mobile phones |
| 600px – 900px | Tablets |
| 900px – 1200px | Small laptops |
| > 1200px | Desktops and large screens |
Fluid Layouts Reduce the Need for Breakpoints
Using Flexbox, Grid, percentages, and the fr unit often lets a layout adapt smoothly without any media queries at all — reach for breakpoints when the layout needs a structural change, not just resizing.
Don’t Forget the Viewport Meta Tag
Media queries only behave correctly on mobile if the HTML document includes <meta name="viewport" content="width=device-width, initial-scale=1.0" /> in its head — otherwise mobile browsers render at a zoomed-out desktop width.
Best Practice
Base your breakpoints on where your own content starts to look cramped or awkward, rather than copying exact device widths — devices and screen sizes change constantly, but your content’s natural breakpoints don’t.