What is responsive web design?

Glossary · Updated October 23, 2026 · Also called: responsive design

Definition Responsive web design (RWD) is the practice of building one page, at one URL, whose layout adapts to the screen it is shown on, from a 320 px phone to a wide desktop monitor. It rests on three techniques: fluid layouts sized in relative units, flexible images that never exceed their container, and CSS media queries that change the layout at chosen widths. Ethan Marcotte named the approach in 2010.

How to fix it: Responsive Breakpoints in 2026: Which Widths to Design For

How does responsive design work?

A responsive page sends the same HTML to every device and lets CSS decide the layout:

• Fluid layout. Widths in percentages, fr units, flexbox and grid instead of fixed pixel widths, so columns stretch and shrink with the viewport.
• Flexible media. max-width: 100% on images and video, plus srcset so phones download smaller files.
• Media queries. Media queries switch the layout at breakpoints, for example from one column to three.

All of it depends on the viewport meta tag; without it phones render a 980 px desktop layout and none of the small-screen rules apply. Modern CSS adds container queries (a component reacts to its own width) and clamp() for type and spacing that scale smoothly.

Responsive vs adaptive vs separate mobile site

Adaptive design serves a few fixed-width layouts chosen by screen size or device detection. A separate mobile site (often on an m. subdomain) has its own URLs and HTML. Google recommends responsive design as the easiest pattern to implement and maintain, because there is one URL and one HTML version to crawl, which also matters under mobile-first indexing.

Example

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

.cards { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
img { max-width: 100%; height: auto; }

This grid shows one column on a 360 px phone and as many 260 px columns as fit on wider screens, without a single media query.

How MobileCheck checks it

MobileCheck loads the page on the phones and tablets you pick, each with its real CSS viewport, in four scenarios: normal, dark mode, text at 150% and with the mobile menu opened. It flags what responsive layouts most often get wrong: content wider than the screen, text that is too small, overlapping or clipped text, small tap targets and sticky bars that cover too much of the screen.

Related terms

• Mobile-firstMobile-first means designing and writing CSS for small screens first, then adding wider layouts with min-width media queries.
• Media queryA media query is a CSS condition (@media) that applies styles only when the device matches it, such as a minimum viewport width or dark mode.
• BreakpointA breakpoint is a viewport width at which a responsive layout changes, set with a media query, for example from one column to two at 600 px.
• Viewport meta tagThe viewport meta tag tells mobile browsers how wide to lay out a page. width=device-width, initial-scale=1 makes it fit the phone's own width.
• Horizontal scrollingHorizontal scrolling happens when content is wider than the viewport, so a phone page can be dragged sideways. WCAG Reflow forbids it at 320 CSS px.

Guides and tools

• Responsive Breakpoints in 2026: Which Widths to Design For
• Responsive design checker
• CSS media query generator

Sources

1. web.dev: Responsive web design basics
2. Google Search Central: Mobile site and mobile-first indexing best practices

All 27 glossary terms, A to Z