CSS RWD Media Queries

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>