My Knowledge Base

Responsive Web Design

2 min read

Responsive Web Design

Responsive Web Design (RWD) is the practice of building web layouts that adapt gracefully to any screen size — from phones to large desktop monitors. The three foundational techniques are: fluid grids, flexible images, and media queries. The Natours project implements RWD through a sass-scss breakpoint mixin system.

Breakpoint System in Natours

The respond() mixin in sass/abstracts/_mixins.scss centralises all breakpoints:

@mixin respond($breakpoint) {
    @if $breakpoint == phone      { @media (max-width: 37.5em)  { @content }; }  // 600px
    @if $breakpoint == tab-port   { @media (max-width: 56.25em) { @content }; }  // 900px
    @if $breakpoint == tab-land   { @media (max-width: 75em)    { @content }; }  // 1200px
    @if $breakpoint == big-desktop{ @media (min-width: 112.5em) { @content }; }  // 1800px
}

Usage: @include respond(tab-port) { grid-template-columns: 1fr; }.

Why em Units for Breakpoints

Breakpoints use em (not px) so they scale relative to the user’s browser font-size preference. If a user has set their browser to 20px base, 37.5em = 750px — the phone breakpoint adjusts proportionally, preventing the layout from breaking for accessibility-focused users.

Breakpoint Strategy

  • [no breakpoint] — base styles designed for desktop (1200–1800px range).
  • tab-land (≤1200px) — slight adjustments for smaller laptops.
  • tab-port (≤900px) — two-column layouts collapse; navigation adapts.
  • phone (≤600px) — single-column layout; text scales down.
  • big-desktop (≥1800px) — scales up the root font-size to 12px/16px = 75% for proportional enlargement on large screens.

The 10px Root Trick

Natours sets html { font-size: 62.5%; } (10px equivalent), then uses rem for all sizing: 1.6rem = 16px. This makes the maths trivial and connects everything to the root font size — changing the root at a breakpoint scales the entire UI.

Responsive Images

The Natours HTML uses srcset and sizes for resolution-switching:

<img srcset="img/nat-1.jpg 300w, img/nat-1-large.jpg 1000w"
     sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
     src="img/nat-1-large.jpg">

The browser selects the smallest image sufficient for the display density and viewport size, reducing bandwidth on mobile.

See Also

Graph View

Backlinks