What is responsive web design? How it works (media queries, fluid grids, images)

Responsive web design (RWD) is a web design approach that makes pages render well on all screen sizes and resolutions while keeping good usability. Instead of building one layout for desktop and another for mobile, you build a single fluid page that adapts to whatever device opens it — a phone, tablet, laptop, or widescreen monitor. The term responsive design was coined by Ethan Marcotte in 2010 to describe building with fluid grids, fluid images, and media queries.

Why responsive design replaced the old approach

Before RWD became standard, developers talked about mobile web design. Sites served different experiences based on which device the visitor used — often through server-side browser sniffing that detected the browser type and served a stripped-down page to phones. Mobile devices used to be low-powered and some browsers couldn't handle CSS or full HTML, so this made sense at the time.

That's no longer the case. Modern phones handle the same technologies as desktop computers, and there are now many device shapes — laptops, tablets, phones, and watches. Instead of catering to a few screen sizes, you design defensively for common sizes plus unknowns. The goal stays the same as the old "mobile-friendly" approach: good layout, readable content, and reasonable performance on every device.

HTML is fluid by default

Plain HTML is inherently fluid. If you create a page with no CSS and resize the window, the browser automatically reflows the text to fit the viewport. The problem isn't wrapping — it's that a page's design breaks down without help: long lines of text on a wide monitor are hard to read, while a fixed-width design causes horizontal scrollbars on narrow screens and empty space on wide ones.

RWD solves this with three building blocks that Marcotte described in 2010: fluid grids, fluid images, and media queries.

Fluid grids and relative units

A fluid grid uses relative units (percentages, em, rem, viewport units like vw) instead of fixed pixel column widths, so the layout stretches and shrinks with the viewport. Modern CSS layout methods — Flexbox and CSS Grid — are inherently responsive and handle most of this for you, so you rarely hand-build percentage grids anymore.

Media queries: the condition-based switch

Media queries let you run tests about the device (for example, viewport width, orientation, or screen vs. print) and apply CSS selectively. They're initiated with the @media at-rule. Every stylesheet has an implicit media type of all unless you specify one, which means these two blocks are equivalent:

body { color: black; background-color: white; }

@media all { body { color: black; background-color: white; } }

You can target media types like print (useful to stop wasting ink on backgrounds) or screen, and you can add conditions on top — these are called media features. A common one is orientation:

@media (orientation: landscape) { /* landscape styles */ }
@media (orientation: portrait) { /* portrait styles */ }

For responsive design the most useful media feature is viewport width. min-width applies styles when the window is at least a certain width:

@media (min-width: 720px) { /* wide-screen styles */ }

max-width applies styles below a width, and you can write the same condition with range syntax:

@media (max-width: 400px) { /* narrow styles */ }
@media (width <= 400px) { /* equivalent */ }

You can combine conditions with and:

@media (min-width: 50em) and (max-width: 60em) { /* between 50em and 60em */ }

The point where a media feature condition becomes true is called a breakpoint. Best practice is to choose breakpoints based on your content — for instance, the width at which lines of text become uncomfortably long — rather than on specific device sizes, since popular device sizes change every release cycle. It's also recommended to use relative units rather than absolute sizes when defining breakpoints.

Mobile-first vs. desktop-first

A common approach is mobile-first: start with a single-column layout for narrow screens, then add media queries for wider screens only when you know there's enough room for a multi-column layout. This keeps the base experience simple and fast, and narrow devices never download unnecessary desktop-only layout rules.

The viewport meta tag

Mobile browsers once rendered desktop-width pages and squashed them to fit the phone screen, which made everything tiny. The viewport <meta> tag fixes this by telling the browser how wide the page should be. The standard declaration sets the page width to the device's CSS-pixel width:

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

The content attribute is a comma-separated list of key=value pairs, including width (or the special value device-width), height, initial-scale, maximum-scale, minimum-scale, and user-scalable. Avoid disabling zoom: setting user-scalable to no prevents people with low vision from reading the page, and WCAG requires at least 2× scaling (5× is the recommended target).

Responsive images

Text wraps automatically at the edge of the screen, but images have an intrinsic size and can overflow a narrow viewport. Several techniques keep them responsive:

Constrain with CSS. Use max-inline-size: 100% so an image never renders wider than its container, and block-size: auto so the browser preserves the aspect ratio while resizing:

img { max-inline-size: 100%; block-size: auto; }

Fit within an aspect ratio. If a design forces a different aspect ratio, object-fit: contain preserves the image's ratio (leaving empty space) and object-fit: cover crops it (filling the box). object-position changes where the crop focuses:

img { width: 100%; aspect-ratio: 2/1; object-fit: cover; object-position: top center; }

Hint the browser in HTML. Always include width and height attributes so the browser reserves the correct space and other content doesn't jump when the image loads (this prevents layout shift). Use loading="lazy" for images below the fold, and for a hero/LCP image use loading="eager" and optionally fetchpriority="high" to fetch it immediately:

<img src="hero.jpg" alt="Description" width="1200" height="800" loading="eager" fetchpriority="high">

Only set fetchpriority="high" on a truly vital image, because prioritizing one resource means the browser de-prioritizes another (such as a script or font file).

Deliver the right size. The srcset attribute complements (does not replace) src, giving the browser a set of candidate images and letting it choose the most appropriate one for the device and viewport.

Summary

Responsive web design is an approach, not a single technology: fluid grids and relative units let layouts adapt, media queries switch styles at content-driven breakpoints, the viewport meta tag makes mobile browsers treat pages at their real width, and fluid images with width/height hints prevent overflow and layout shift. The mindset is defensive — design for the known device sizes and be ready for the unknowns.

FAQ

What is the main difference between responsive and adaptive design?

Responsive design builds one fluid layout that responds to the screen using fluid grids, fluid images, and media queries. The older "mobile" approach — and some adaptive setups — served different layouts per device, sometimes via server-side browser detection. RWD renders well on any screen size with a single page, which is why it became the standard.

Do I need media queries for every breakpoint?

No. Start from a mobile-first single-column layout, then add media queries only where your content needs them — for example, where text lines get too long for comfortable reading. Breakpoints should be driven by content, not by the latest phone model, and mobile users should not download desktop-only layout rules.

Why does my mobile page look like a tiny desktop page?

That's the symptom before the viewport meta tag: mobile browsers rendered the desktop-width page and shrunk it, making text unreadably small. Adding <meta name="viewport" content="width=device-width, initial-scale=1"> makes the browser treat the page at the device's pixel width, so the layout reflows correctly on mobile.

How do responsive images prevent layout shift?

Images have an intrinsic size but text wraps, so a wide image can overflow or push content around. Setting the CSS rules above, giving every image width and height attributes so the browser reserves the space, and using loading="lazy" below the fold means the page keeps its layout instead of jumping when images load.

Should I disable pinch-to-zoom on mobile?

No. Setting user-scalable=no blocks zoom for people with low vision and is discouraged by accessibility guidance that requires at least 2× scaling. Keep the default zoom enabled and let the responsive layout do the work.