Mobile First and Media Queries

What this is. A responsive site is not two sites. It is one set of markup whose presentation adapts to the space available.

Mobile first means you write the narrow layout as your base CSS, then use media queries to add complexity as the screen gets wider. The alternative, starting wide and stripping things away, means every phone downloads and then overrides desktop rules it will never use.

Two directions to write the same layout

MOBILE FIRST

/* base: one column */
.gallery {
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .gallery {
    grid-template-columns: 1fr 1fr;
  }
}

DESKTOP FIRST

/* base: two columns */
.gallery {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 40rem) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

Compare → Both produce the same result. The left one starts simple and adds, which means the smallest devices run the least CSS. It also tends to produce fewer overrides, because you are building up rather than undoing.

Choosing breakpoints. Do not chase device names. Phones, tablets and laptops change every year and their widths overlap. Instead, widen your own layout until it starts to look wrong, and put a breakpoint there. Content decides the breakpoint, not hardware.

LIVE PREVIEW

loading editor…

Your turn → Change the first breakpoint from 30rem to 10rem. The two-column layout kicks in immediately, because the preview is already wider than 10rem. That is how you test a breakpoint without resizing anything.

Mark this lesson complete

Signed in, your progress follows you to every device.

Next: Fluid Sizing and Flexible Media →

← Back