Responsive design combines the viewport meta tag, media queries, fluid units (%, vw, rem, clamp()), and mobile-first methodology to create layouts that adapt gracefully from mobile screens to large desktops.
The viewport meta tag is required for responsive design — without it, mobile browsers render at desktop width and scale down, making the page unusable on small screens.
Write base styles for the smallest screen and progressively enhance with min-width media queries. This results in smaller CSS for mobile devices and a simpler mental model.
rem scales with user font preferences, vw/vh scale with the viewport, and clamp(min, preferred, max) provides fluid sizing with minimum and maximum guardrails — replacing many media queries.
Set breakpoints where your content actually breaks, not at arbitrary device widths. The goal is a layout that works at every size, not just a few predetermined widths.
Responsive web design ensures that websites work well across all screen sizes and devices. It is a foundational skill tested in virtually every front-end interview.
Every responsive page needs this in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">Without it, mobile browsers render the page at a desktop width (typically 980px) and then scale it down, making text tiny and interactions impossible. This meta tag tells the browser to set the viewport width to the device's actual width.
Media queries apply styles conditionally based on device characteristics:
@media (min-width: 768px) {
.sidebar { display: block; }
}Common breakpoints (not prescriptive, but widely used): 640px (small/mobile), 768px (tablet), 1024px (desktop), 1280px (large desktop). The actual breakpoints should be determined by where your content breaks, not by arbitrary device widths.
Media queries can check: width, height, orientation, prefers-color-scheme (dark mode), prefers-reduced-motion (accessibility), hover (touch vs pointer devices), and resolution (retina displays).
Mobile-first means writing base styles for the smallest screen and adding complexity with min-width media queries:
/* Base: mobile (single column) */
.grid { display: flex; flex-direction: column; }
/* Tablet: two columns */
@media (min-width: 768px) {
.grid { flex-direction: row; }
}This approach results in smaller CSS for mobile devices (the most performance-constrained), progressive enhancement for larger screens, and simpler mental model (add complexity, don't remove it).
width: 50% is half the parent's width.100vw spans the full viewport. Caveat: 100vw includes the scrollbar width, which can cause horizontal overflow.1.5rem = 24px. Ideal for typography and spacing that scales with user font preferences.100vh is taller than the visible area on mobile Safari.The clamp(min, preferred, max) function provides fluid sizing with guardrails:
font-size: clamp(1rem, 2.5vw, 2rem);This creates font size that scales with viewport width but never goes below 1rem or above 2rem. It replaces media queries for fluid typography and spacing.
max-width: 100% prevents images from overflowing their containersrcset attribute lets the browser choose the right image size based on viewport and resolution<picture> element with <source> provides art direction (different crops for different screen sizes)aspect-ratio property prevents layout shift by reserving space before the image loadsFluid typography scales text size between breakpoints without abrupt jumps:
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}For body text, stick with rem units and let users control the base font size. Never set font-size on the html element in pixels — it overrides user preferences.
Browser DevTools device mode simulates various screen sizes. Test on actual devices when possible, as touch interactions, performance, and rendering differ from emulation. Key things to verify: touch target sizes (minimum 44x44px), text readability without zooming, no horizontal scrolling, and functional interactive elements.
Fun Fact
The term 'responsive web design' was coined by Ethan Marcotte in a 2010 A List Apart article. Before that, developers built entirely separate mobile websites (often on m.example.com subdomains) that had to be maintained independently from the desktop version.