• Chapter 5 — Responsive Design
  • Why It Matters
  • The Viewport Meta Tag — Non-Negotiable
  • Media Queries — The Core Tool
  • Breakpoints — Standard Screen Sizes
  • Mobile First — The Recommended Approach
  • Responsive Typography with clamp()
  • Responsive Units
  • The Container Pattern
  • Responsive Grid Layout
  • Responsive Images
  • Show and Hide by Screen Size
  • CSS Reset — Always Include

§Chapter 5 — Responsive Design

§Why It Matters

In 2026, over 60% of web traffic is mobile. Responsive means your page adapts to any screen size without building separate sites.

§The Viewport Meta Tag — Non-Negotiable

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Without this, mobile browsers zoom out and show a shrunken desktop version. Always include this. No exceptions.

§Media Queries — The Core Tool

A media query is like an if statement for screen size:

/* Normal styles — apply always */
.card { padding: 24px; }

/* IF screen width is 600px or less */
@media (max-width: 600px) {
  .card { padding: 12px; }
}

§Breakpoints — Standard Screen Sizes

@media (min-width: 480px)  { /* Large phones and up */ }
@media (min-width: 768px)  { /* Tablets and up */ }
@media (min-width: 1024px) { /* Laptops and up */ }
@media (min-width: 1280px) { /* Desktops and up */ }

§Mobile First — The Recommended Approach

Start simple (mobile), add complexity for larger screens:

/* Base: mobile styles */
.container { width: 100%; padding: 16px; }

@media (min-width: 768px) {
  .container { max-width: 960px; margin: 0 auto; }
}

@media (min-width: 1024px) {
  .container { max-width: 1200px; }
}

§Responsive Typography with clamp()

h1 {
  font-size: clamp(28px, 5vw, 56px);
  /* min: 28px | preferred: 5% of screen width | max: 56px */
}

Font smoothly scales between screens with zero media queries.

§Responsive Units

§The Container Pattern

.container {
  max-width: 1200px; /* never wider than this */
  width: 100%;       /* but full width below 1200px */
  margin: 0 auto;    /* center it */
  padding: 0 1rem;   /* breathing room on sides */
}

§Responsive Grid Layout

/* MOBILE */
.page {
  display: grid;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
  grid-template-columns: 1fr;
}

/* TABLET */
@media (min-width: 768px) {
  .page {
    grid-template-areas:
      "header  header"
      "sidebar content"
      "footer  footer";
    grid-template-columns: 220px 1fr;
  }
}

/* DESKTOP */
@media (min-width: 1024px) {
  .page {
    grid-template-columns: 260px 1fr;
  }
}

§Responsive Images

/* Make ALL images responsive by default */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

<!-- Responsive image sizes -->
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  alt="A landscape"
>

§Show and Hide by Screen Size

.desktop-only {
  display: none;
}

@media (min-width: 1024px) {
  .desktop-only { display: block; }
}

.mobile-only {
  display: block;
}

@media (min-width: 1024px) {
  .mobile-only { display: none; }
}

§CSS Reset — Always Include

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img { max-width: 100%; height: auto; display: block; }
input, button, textarea, select { font: inherit; }

Tags: #CSS #css #vdsology #webdevelopment #vdsologyCSS #CSS3 #CSSreference #CSSreference2026