Responsive Web Design: How to Build Pages That Work on Every Screen

Key ideas: viewport, fluid layouts and relative units

Responsive design rests on a few building blocks. Without the viewport meta tag, mobile browsers pretend to be a wide desktop screen and shrink the page, so no media query behaves as expected.

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

A fluid layout uses widths that adapt to the space available, such as percentages, fr units in grid or flexible items in flexbox, plus a max-width so lines of text do not stretch too far on large screens.

Sizing text in rem respects the reader's browser font setting, which pixel sizes can override.

How mobile-first media queries work

A media query applies CSS only when a condition is true. In a mobile-first stylesheet, the base rules describe the narrow layout, and min-width queries add complexity as space grows. Small screens download and process the simplest rules, and each breakpoint only adds what is new.

.products { display: grid; gap: 1rem; }          /* one column by default */

@media (min-width: 40rem) {
  .products { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64rem) {
  .products { grid-template-columns: repeat(4, 1fr); }
}

Choose breakpoints by watching the content, not by copying the screen sizes of popular phones. Widen the browser slowly; when a line becomes too long, a card looks stretched or a menu no longer fits, that width is a breakpoint. Device sizes change every year, but content-driven breakpoints stay correct.

Responsive images, fluid type and container queries

srcset, sizes and picture

Start with a rule that sets max-width to the full container width and height: auto on every img, so images never overflow. Then give the browser several files and let it choose.

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

<img src="shop-800.jpg"
     srcset="shop-400.jpg 400w, shop-800.jpg 800w, shop-1600.jpg 1600w"
     sizes="(min-width: 64rem) 50vw, 100vw"
     width="1600" height="900"
     alt="Spice shop counter with jars of masala">

<picture>
  <source media="(min-width: 48rem)" srcset="banner-wide.avif" type="image/avif">
  <source media="(min-width: 48rem)" srcset="banner-wide.jpg">
  <img src="banner-square.jpg" width="800" height="800" alt="Diwali sale banner">
</picture>

srcset lists files with their real widths, and sizes tells the browser how wide the image will display, so it can pick a suitable file for the screen and pixel density. Use <picture> when you need a different crop or format at different sizes. Always include width and height; the browser uses their ratio to reserve space and prevent layout shift.

Fluid typography with clamp()

h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }

clamp(min, preferred, max) lets a heading grow smoothly with the viewport but never below or above the limits. Mixing rem into the preferred value keeps text responsive to browser zoom.

Container queries

Media queries respond to the viewport. Container queries respond to the size of a parent element, so a card component can switch layout in a narrow sidebar and a wide main column on the same page. They are supported in all current major browsers.

.card-wrap { container-type: inline-size; }

@container (min-width: 30rem) {
  .card { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; }
}

Making a page responsive step by step

1. Add the viewport meta tag to the <head> of every page.
2. Write base styles for a narrow screen: a single column, readable font size and full-width images.
3. Replace fixed pixel widths with max-width, percentages, rem and flexible layout using flexbox or grid.
4. Widen the browser gradually and add min-width media queries where the content starts to look wrong.
5. Add srcset, sizes and dimensions to content images.
6. Use container queries for components that appear in containers of different widths.
7. Test in your browser dev tools device mode, then on at least one real phone.

Touch, motion and testing: recommended practices

• Make tap targets large enough to hit with a thumb and leave space between them. WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels; many designers aim for around 44 pixels on primary controls.
• Do not rely on hover to reveal menus or information, because touch screens have no hover state.
• Respect visitors who ask their system for less animation with the prefers-reduced-motion media feature.
• Check that text can be zoomed to twice its size without content being cut off or overlapping.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Practical exercise: convert a fixed-width page

Take a simple page built with a fixed 960px container, or build one using our CSS fundamentals guide, with a header, a three-column product list, a hero image and a footer.

1. Rewrite the CSS mobile-first, with one column by default and content-driven breakpoints.
2. Give the hero image three sizes with srcset and sizes, plus width and height.
3. Set the main heading with clamp().
4. Turn the product card into a container query component that switches to a horizontal layout when its container is wide enough.
5. Add a prefers-reduced-motion rule for any transitions.

You are done when the page has no horizontal scroll from 320px to 1920px, the network panel shows smaller image files on narrow screens, and every button is easy to tap in device mode. The front-end part of SkillNewton's PHP foundation course applies these techniques to real project pages.

Common mistakes

• Leaving out the viewport meta tag, so media queries never trigger on phones.
• Choosing breakpoints from a list of device widths instead of where the content breaks.
• Serving one large desktop image to every screen, which slows pages on mobile data.
• Omitting width and height on images, causing the layout to jump as they load.
• Hiding important content on mobile instead of reorganising it.
• Setting font sizes only in vw, which stops text responding to browser zoom.

Frequently asked questions