CSS RWD Media Queries
In this page:
From Syntax to Strategy
Knowing the @media (max-width: 600px) { } syntax is only half the job -- the real skill in responsive breakpoint strategy is deciding how many breakpoints to use and where to place them based on where YOUR content actually starts looking cramped, not a generic device-size chart.
Example: From Syntax to Strategy
<style>
.box {
background: lightblue;
}
@media (max-width: 600px) {
.box {
background: lightgreen;
}
}
</style>
<div class="box">Breakpoint chosen where this content looks cramped</div>Mobile-First Breakpoint Order
A mobile-first strategy writes unprefixed styles for the smallest screen first, then layers on min-width media queries as the screen grows, so each breakpoint only ever ADDS complexity (more columns, wider spacing) rather than overriding earlier rules.
Example: Mobile-First Breakpoint Order
<style>
.columns {
display: block;
background: #eee;
}
@media (min-width: 768px) {
.columns {
display: flex;
}
}
.columns div {
background: steelblue;
color: white;
padding: 10px;
}
</style>
<div class="columns">
<div>Adds complexity as the screen grows</div>
</div>Desktop-First Breakpoint Order
A desktop-first strategy does the reverse -- full desktop styles are the default, and max-width queries strip complexity away as the screen shrinks. It is common in retrofits of older desktop-only sites but generally sends more CSS to mobile users than mobile-first does.
Example: Desktop-First Breakpoint Order
<style>
.columns {
display: flex;
background: #eee;
}
@media (max-width: 768px) {
.columns {
display: block;
}
}
.columns div {
background: steelblue;
color: white;
padding: 10px;
}
</style>
<div class="columns">
<div>Strips complexity away as the screen shrinks</div>
</div>Content-Driven vs Device-Driven Breakpoints
Picking breakpoints to match specific popular device widths (320px iPhone, 768px iPad, etc.) is brittle since new devices ship constantly -- the more durable strategy is to resize your own browser window and add a breakpoint exactly where YOUR layout starts to break, regardless of what device that corresponds to.
Example: Content-Driven vs Device-Driven Breakpoints
<style>
.text {
font-size: 16px;
}
@media (max-width: 540px) {
.text {
font-size: 14px;
}
}
</style>
<p class="text">Breakpoint chosen where this layout breaks, not a device width</p>Common Breakpoint Conventions
Despite the content-driven advice above, most teams still converge on a small set of round-number ranges as a starting point -- roughly 576px, 768px, 992px, and 1200px -- because they cover the practical range of phones, tablets, and desktops closely enough to save everyone from reinventing the wheel each project.
Example: Common Breakpoint Conventions
<style>
.container {
width: 100%;
background: steelblue;
color: white;
padding: 10px;
}
@media (min-width: 576px) { .container { width: 540px; background: seagreen; } }
@media (min-width: 768px) { .container { width: 720px; background: coral; } }
@media (min-width: 992px) { .container { width: 960px; background: darkorange; } }
</style>
<div class="container">Common round-number breakpoints</div>Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: