Responsive design basics

Introduction

Over half of web traffic comes from phones, and screens range from a small handset to a huge monitor. Building a separate site for each would be impossible. Responsive design means building one page which adapts. The next course goes much deeper; this lesson gives you the foundations that every page needs.

How it works

The viewport tag. Phones were designed to show pages built for desktops, so by default they pretend to be about 980 pixels wide and then shrink the result. This line in the head tells them to use their real width, and without it nothing else in this lesson works properly on a phone:

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

Fluid by default. HTML is responsive until something makes it rigid. The usual causes are fixed widths and large images. Prefer max-width to width, and add this to every project:

img { max-width: 100%; height: auto; }

max-width: 100% stops the image from overflowing its parent, and height: auto keeps its proportions.

Media queries apply CSS only when a condition is true:

@media (min-width: 600px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

Mobile-first. Write the simple one-column layout as your normal CSS, then add to it for larger screens using min-width. Phones have the slowest hardware, and this way they process the least complicated styles. Large-screen layouts are usually additions, so the code tends to be shorter too.

Breakpoints. There is no official list of device sizes, and the list would be out of date anyway. Narrow your browser until the layout looks wrong, and add a breakpoint there. Using em units in media queries respects a reader's text size.

Smooth scaling. clamp(min, preferred, max) lets a value grow smoothly and stay within limits:

h1 { font-size: clamp(1.5rem, 1rem + 3vw, 3rem); }

Adding a rem part to the middle value matters, because a size based only on vw will not grow when someone zooms in.

Other conditions. Media queries can respond to more than size: prefers-reduced-motion, prefers-color-scheme and hover are all useful.

Container queries. Using @container, a component can respond to the size of its own container rather than the whole window. A card can then rearrange itself wherever it is placed. They have been supported by all major browsers since 2023.

Testing. Browser developer tools have a device mode, but a real phone shows things that a simulator will not, such as how far your thumb has to reach.

Syntax

.layout { display: grid; gap: 16px; }

@media (min-width: 48em) {
  .layout { grid-template-columns: 240px 1fr; }
}

Example

Drag your browser window narrower to see this change. It reacts to the width of its own frame.

Line by line

1. By default .layout is a one-column grid, which is the phone layout.
2. The media query adds a second column once the frame reaches 400px.
3. The message appears only when the condition is met, so that you can see it working.

Expected result

On a computer, Menu and Content appear side by side with the message below. In a narrow window, they stack and the message disappears.

In the real world

Every major site is responsive, and search engines primarily look at a site's mobile version when deciding how to rank it. Design teams usually sketch the phone layout first, because it forces decisions about what matters most.

Common mistakes

• Leaving out the viewport tag.
• Setting fixed pixel widths on large containers.
• Choosing breakpoints for specific phones.
• Using only vw for font sizes, which breaks zoom.

Best practices

• Write mobile-first.
• Test by dragging the window across all widths, not just at breakpoints.
• Use grid and flexbox, which adapt on their own.
• Keep touch targets at least 24 pixels, and ideally more.

Summary

The viewport tag makes phones use their true width. Fluid images and flexible layouts cover most cases, and min-width queries add to a small-screen base. clamp() scales values smoothly, and container queries let components adapt on their own.

Mark lesson complete