Responsive Design

People visit websites on phones, tablets, laptops and huge monitors. Responsive design means one page adapts to all of them. It starts in HTML — with the viewport meta tag, flexible images and sensible structure — and is completed with CSS.

The viewport meta tag

HTML viewport.html

<title>My site</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

Without this line, phones pretend to be a desktop screen about 980 pixels wide and shrink the whole page to fit, leaving tiny unreadable text. With it, the page's width matches the device's width and CSS media queries work as intended. Every page needs it.

Don't disable zooming. Avoid maximum-scale=1 or user-scalable=no — many people need to zoom in to read, and blocking it is an accessibility failure.

Mobile-first thinking

Start with the narrowest layout — a single column — and add complexity as space allows. Well-ordered semantic HTML is naturally a good single-column layout, so mobile-first CSS mostly adds columns for larger screens rather than undoing them for smaller ones.

Media queries

<style>
  .layout { display: grid; gap: 10px; font-family: sans-serif; }
  .layout > * { background: #f4f6fa; padding: 12px; border-radius: 6px; }
  @media (min-width: 600px) {
    .layout { grid-template-columns: 2fr 1fr; }
  }
  @media (min-width: 900px) {
    .layout { grid-template-columns: 1fr 2fr 1fr; }
  }
</style>
<div class="layout">
  <nav>Navigation</nav>
  <main>Main content — resize the window to see the columns change.</main>
  <aside>Sidebar</aside>
</div>

Result

Media queries apply CSS only when conditions are true — typically a minimum width. Choose breakpoints where your content starts to look cramped, not for particular devices.

Fluid images and media

This one rule stops images from overflowing small screens. Combine it with srcset and <picture> (lesson 13) so phones also download smaller files.

Flexible units and type

Use relative units — rem, em, %, vw, ch — instead of fixed pixels for widths and type.
clamp(min, preferred, max) creates fluid sizes that never get too small or too big.
Respect the user's chosen font size: set rem-based sizes rather than overriding the root size in pixels.

Container queries

Media queries respond to the whole window. Container queries let a component respond to the size of the box it's placed in — so the same card can be compact in a sidebar and spacious in the main column:

<style>
  .slot { container-type: inline-size; border: 1px dashed #b9c2d4; margin-bottom: 10px; padding: 6px; }
  .product { display: grid; gap: 8px; font-family: sans-serif; }
  .product .thumb { background: #d6336c; min-height: 60px; border-radius: 6px; }
  @container (min-width: 380px) {
    .product { grid-template-columns: 120px 1fr; }
  }
</style>
<div class="slot" style="width: 220px"><div class="product"><div class="thumb"></div><div>Narrow container: stacked</div></div></div>
<div class="slot"><div class="product"><div class="thumb"></div><div>Wide container: side by side</div></div></div>

Result

Touch-friendly HTML

Make buttons and links large enough to tap — around 44×44 pixels — with space between them.
Use correct input types and inputmode so phones show the right keyboard (lessons 27–28).
Don't rely on hover: touch screens can't hover, so hover-only menus and tooltips need an alternative.
Avoid fixed-width elements wider than the screen, which cause sideways scrolling.

Respecting user preferences

Media queries can also detect dark mode, reduced-motion settings, high contrast and whether the device has a fine pointer (mouse) or coarse pointer (finger).

Testing

Browser developer tools include a device toolbar (Ctrl+Shift+M in Chrome) to preview many screen sizes. Still test on a real phone when you can — touch, performance and on-screen keyboards behave differently from the simulation.

PreviousDrag & Drop and APIs NextAccessibility