On this page
Responsive web design means one page that works at every screen size, instead of a separate mobile site. The idea is old. The toolkit is not: when our original article on this was written in 2019, container queries and clamp() were not usable yet, and layouts leaned on three fixed breakpoints. Here is what a responsive page is made of today, component by component.
What the components of responsive web design include
Seven pieces do the work. Each one is independent of the others, and a page that skips any of them fails in its own predictable way.
| Component | What it does | Main CSS or HTML |
|---|---|---|
| Viewport | Makes mobile browsers use the real screen width | <meta name="viewport"> |
| Fluid layout | Columns that grow, shrink and wrap | Flexbox, Grid |
| Flexible media | Images and video that fit and load the right size | max-width, srcset, sizes |
| Media queries | Change layout at viewport widths | @media |
| Container queries | Change a component based on its own space | @container |
| Relative units | Sizes that scale with text and screen | rem, %, vw, clamp() |
| Touch targets | Controls you can hit with a finger | Sizing and spacing |
1. The viewport meta tag
The smallest component and the one that makes every other one work:
<meta name="viewport" content="width=device-width, initial-scale=1">Without it, a phone pretends to be a roughly 980-pixel-wide desktop, renders your page at that width and zooms out. Your media queries never match, and everything looks tiny. MDN's viewport reference lists every value the tag accepts. Don't add maximum-scale=1 or user-scalable=no; blocking zoom is an accessibility failure.
2. Fluid layouts
The old answer was percentage-width floats. Today it is Grid and Flexbox, and a lot of layouts no longer need a single media query. This grid fits as many 250-pixel columns as it can and stretches them to fill the row:
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
gap: 1.5rem;
}The min(250px, 100%) part stops the columns forcing horizontal scrolling on screens narrower than 250 pixels. Flexbox handles one-dimensional rows that should wrap:
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}One trap in both: flex and grid items refuse to shrink below their content width by default, so long words or file names blow layouts open. Truncating text with CSS explains the min-width: 0 fix.
3. Flexible images and other responsive elements
Two separate problems. First, don't let images overflow their container:
img, video {
max-width: 100%;
height: auto;
}Second, don't send a 2400-pixel image to a phone. Give the browser options and let it choose:
<img
src="hero-1200.jpg"
srcset="hero-600.jpg 600w, hero-1200.jpg 1200w, hero-2400.jpg 2400w"
sizes="(min-width: 900px) 50vw, 100vw"
width="1200" height="630"
alt="Dashboard showing meeting statistics"
loading="lazy">The width and height attributes matter even though CSS resizes the image. They let the browser reserve the right space before the file loads, so the page doesn't jump around. Leave loading="lazy" off the main image at the top of the page, where it would delay the most important paint.
4. Media queries
Media queries switch styles at viewport sizes. Write mobile styles first, then add wider layouts with min-width:
.page {
display: grid;
gap: 2rem;
}
@media (min-width: 48rem) {
.page {
grid-template-columns: 16rem 1fr;
}
}Pick breakpoints where your content breaks, not at iPhone or iPad widths. Using rem for breakpoints means the layout also adapts when a user increases their default font size. Media queries also cover more than width: prefers-reduced-motion, prefers-color-scheme and (hover: hover) are all part of responding to the device.
5. Container queries
The component our 2019 article could not include. A container query styles an element based on the space its container gives it, not the whole viewport. The same card can sit in a narrow sidebar and a wide main column and lay itself out correctly in both:
.card-wrapper {
container-type: inline-size;
}
.card {
display: grid;
gap: 1rem;
}
@container (min-width: 30rem) {
.card {
grid-template-columns: 10rem 1fr;
}
}Container queries have been supported across all major browsers since 2023, and MDN's container queries guide covers the query units that come with them. For design systems and component libraries they are now the better default than media queries.
6. Relative units and fluid type
| Unit | Relative to | Use for |
|---|---|---|
rem | Root font size | Font sizes, spacing, breakpoints |
em | The element's font size | Padding that scales with a component's text |
% | The parent | Widths inside a container |
vw, vh | The viewport | Full-screen sections, part of fluid type |
dvh | Dynamic viewport height | Full-height mobile layouts where toolbars appear and disappear |
ch | Width of the "0" character | Readable line lengths |
clamp() combines them into type that scales smoothly with no breakpoints at all:
h1 {
font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
}
.article {
max-width: 70ch;
}The heading is never smaller than 1.75rem or larger than 3rem, and grows with the screen in between. Keep a rem term in the middle value; pure vw font sizes ignore the user's zoom setting.
7. Touch targets
A layout that fits on a phone can still be unusable if the controls are too small to tap. WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels, and platform guidelines recommend larger, around 44 to 48 pixels, for main controls. You can grow the tappable area without making the icon bigger:
.icon-button {
min-width: 44px;
min-height: 44px;
display: inline-grid;
place-items: center;
}Test on a real phone
Responsive design matters most in apps people use under pressure, like joining a video call from a phone at the last minute. Customizing the Jitsi Meet front end shows where those layouts live in a real conferencing app, and the Jitsi IFrame API covers embedding a meeting inside your own responsive page.
8. Responsive web design sizes and max-width
There is no official list of responsive sizes, and chasing device dimensions is a losing game. What helps is a small set of bands to sanity-check a layout in, plus a cap on how wide the content is ever allowed to get.
| Band | Typical width | What usually changes |
|---|---|---|
| Small phone | 320 to 430px | Single column, stacked navigation |
| Large phone | 430 to 600px | Two small cards per row |
| Tablet | 600 to 1024px | Sidebar appears, menu expands |
| Laptop | 1024 to 1440px | Full multi-column layout |
| Wide desktop | 1440px and up | Container stops growing |
Responsive web design max width
Without a cap, a page on a 32-inch monitor stretches paragraphs to 200 characters a line and nobody reads them. Two caps handle it:
.container {
width: 100%;
max-width: 1280px;
margin-inline: auto;
padding-inline: 1.5rem;
}
.prose {
max-width: 65ch;
}The outer cap keeps the layout from sprawling, and the ch cap holds text at a readable line length whatever the font size. Google's responsive web design basics covers the same ground from the viewport side.
Frequently Asked Questions
What are the main components of responsive web design?
The viewport meta tag, fluid layouts built with flexbox or grid, flexible images and media, media queries, and relative units. Modern responsive design adds container queries, fluid typography with clamp(), and touch-friendly target sizes.
What breakpoints should I use?
Set breakpoints where your content breaks, not at device widths. Shrink the browser until the layout looks wrong, and add a breakpoint there. Device sizes change every year; the width at which your navigation stops fitting does not.
What is the difference between media queries and container queries?
A media query responds to the size of the viewport. A container query responds to the size of the element's container. Container queries make components reusable: a card can switch to a horizontal layout whenever its column is wide enough, wherever it is placed.
Do I still need the viewport meta tag?
Yes. Without it, mobile browsers render the page at a desktop width and scale it down, and your media queries never match. Every responsive page needs .
How big should buttons be on mobile?
WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels, with spacing exceptions. Apple and Google both recommend larger targets, around 44 to 48 pixels, for primary controls. Make the tappable area large even if the visible icon is small.
What screen sizes should responsive web design support?
Design for ranges, not devices. The usual bands are under 480 pixels for phones, 600 to 1024 for tablets, and 1280 and up for desktops. Treat them as a sanity check, and set your real breakpoints where your own layout breaks.
What max-width should a responsive website use?
Most sites cap the main container between 1100 and 1400 pixels so lines do not stretch across wide monitors. For body text, a max-width of 60 to 75 characters reads better than any pixel value.
