What is Responsive Web Design?

Responsive web design (RWD) is the approach of building a single website that reshapes itself to look right on a phone, a tablet, and a widescreen monitor — without maintaining separate versions of the site for each. It's been the default way to build the web since mobile traffic overtook desktop, and Google has used mobile-friendliness as a ranking signal for years.

Step Zero: The Viewport Meta Tag

Before any responsive CSS can work, the page needs this line inside <head>:

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

Without it, mobile browsers assume the page was designed for a desktop and render it at a wide virtual width (typically around 980px), then shrink everything to fit. Your media queries never fire as expected, and text appears tiny. It’s the single most common reason a “responsive” site doesn’t look responsive on a real phone. Our guide on what the viewport is in CSS explains this in more detail.

The Three Pillars

Fluid Grids

Instead of fixed pixel widths, layouts are built with relative units — percentages, fr units in CSS Grid, or vw — so columns resize proportionally as the screen changes rather than staying a fixed width and forcing horizontal scrolling.

Flexible Images

Images need to shrink along with their containers. The classic fix is img { max-width: 100%; height: auto; }, which stops an image from overflowing its parent while preserving its aspect ratio.

Media Queries

Media queries let you apply different CSS rules at different screen widths — @media (max-width: 768px) { ... } — so a three-column layout can collapse into a single column on mobile, or a sidebar can move above the main content instead of squeezing beside it.

Which CSS Units to Use Where

Choosing units is where most responsive layouts succeed or fail. A practical split:

Unit	Relative to	Use it for
rem	The root font size (16px by default)	Font sizes, spacing, media query breakpoints
%	The parent element	Column widths, images inside containers
fr	Free space in a CSS Grid	Dividing a grid into flexible columns
vw / vh	The browser viewport	Full-screen sections, fluid headings
px	A fixed CSS pixel	Borders, hairlines, small fixed details

Using rem for text and spacing means the whole layout respects the user’s browser font-size setting. A 24px heading becomes 1.5rem (24 ÷ 16); our PX to REM converter does that division for you. For a deeper comparison, see PX vs REM: which to use, and for viewport units specifically, how to use VH and VW in CSS.

A Worked Example: A Mobile-First Card Grid

Here’s a card layout that shows one column on phones, two on tablets and three on desktops:

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;
}

@media (min-width: 48rem) {   /* 768px */
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {   /* 1024px */
  .cards { grid-template-columns: repeat(3, 1fr); }
}

The same result can often be achieved with no media queries at all, by letting the grid decide how many columns fit:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

Each card is at least 16rem (256px) wide. On a 375px phone, only one fits; in a 780px-wide container, three cards would need 768px plus 32px of gaps (800px), so two fit; on a wide screen, as many as fit. This is called intrinsic layout: the content defines the breakpoints rather than a list of device widths.

Responsive Images Beyond max-width

max-width: 100% stops images overflowing, but it still sends a large file to a small phone. The srcset and sizes attributes let the browser pick an appropriately sized file:

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     sizes="(min-width: 64rem) 33vw, 100vw"
     width="800" height="450" alt="...">

Setting width and height attributes (or the CSS aspect-ratio property) lets the browser reserve the correct space before the image loads, which prevents the page from jumping as images arrive. The 800×450 above is a 16:9 ratio; the Aspect Ratio Calculator can work out matching heights for any width.

Container Queries: Components That Adapt to Their Space

Media queries respond to the size of the whole screen. Container queries, supported in all current major browsers, respond to the size of a component’s parent. That means a card can switch to a horizontal layout when it’s placed in a wide main column and stay stacked in a narrow sidebar — on the same screen:

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

@container (min-width: 30rem) {
  .card { display: flex; gap: 1rem; }
}

Mobile-First vs Desktop-First

Most teams today write mobile-first CSS: base styles target the smallest screen, and media queries use min-width to add complexity as the screen grows. This tends to produce leaner CSS than the older desktop-first approach, because you're adding features for larger screens rather than stripping them away for smaller ones.

Common Breakpoints

There's no universal standard, but most sites cluster around similar widths: roughly 480px for phones, 768px for tablets, and 1024px+ for desktops. Rather than targeting specific devices, the better practice is to add a breakpoint wherever your own layout actually starts to look broken.

Testing It

Browser dev tools (F12 → device toolbar) let you preview common device sizes, but the real test is resizing the browser window slowly from full width down to a phone's width and watching for the point where text wraps badly, images overflow, or spacing collapses. After that, check on at least one real phone: touch targets, the on-screen keyboard and the browser toolbar behave differently from a desktop emulation.

Common Responsive Design Mistakes

• Fixed widths on containers. width: 1200px forces horizontal scrolling on anything smaller. Use max-width: 1200px; width: 100%; instead.
• Hiding content on mobile. With mobile-first indexing, Google primarily uses the mobile version of a page. Content hidden from phone users is content you’re making harder to find.
• Tiny tap targets. Links and buttons squeezed together are hard to tap. Aim for roughly 44–48px of tappable area for primary controls.
• Too many breakpoints. A breakpoint for every device creates fragile CSS. Two or three well-chosen ones, plus flexible grids, cover most layouts.
• Ignoring landscape and very wide screens. Test a phone on its side and a 2560px monitor, not just portrait phones and laptops.

Converting fixed pixel values to responsive units like rem or vw is part of building a fluid layout — our CSS unit converters make that quick. Need to keep images or video at the right proportions across breakpoints? Our Aspect Ratio Calculator handles that too.

Frequently Asked Questions

Is responsive design the same as a mobile site?

No. A separate mobile site (often on an “m.” subdomain) is a second set of pages. Responsive design serves the same HTML at the same URL to every device and changes only the CSS layout, which is simpler to maintain.

What’s the difference between responsive and adaptive design?

Responsive layouts flex continuously between breakpoints. Adaptive design switches between a few fixed layouts built for specific widths. Most modern sites are responsive, sometimes with adaptive touches at major breakpoints.

Should breakpoints be written in px or em?

Either works in current browsers. Many developers use em or rem breakpoints (for example 48em for 768px) so the layout also adapts when users increase their default font size.

Do I need a CSS framework to build responsively?

No. Flexbox, Grid, clamp() and container queries cover nearly everything frameworks used to provide. Frameworks can speed up work, but they aren’t required.

Try it yourself: pick one fixed-width element on your site, convert its pixel width to rem or % with our CSS unit converters, then slowly resize your browser from desktop to phone width and note where the layout first breaks — that’s where your next breakpoint belongs.