Responsive Design

Responsive design means building layouts that adapt to any screen size — from a phone to a widescreen monitor. The goal is one codebase that works everywhere.

The Viewport Meta Tag

This tag is required for responsive design to work on mobile devices:

<meta name="viewport" content="width=device-width, initial-scal=1.0">

Without it, mobile browsers render the page at a desktop width (typically 980px) and then zoom out, making everything tiny.

Mobile-First Approach

Write your base styles for small screens, then add complexity for larger ones. This keeps mobile styles simple and avoids overriding desktop styles on smaller devices:

Common breakpoints:

• 640px — small tablets, large phones in landscape
• 768px — tablets
• 1024px — small laptops
• 1280px — desktops

These are guidelines, not rules. Set breakpoints where your design breaks, not at specific devices.

Media Queries

Media queries conditionally apply styles based on viewport characteristics:

Fluid Typography

Instead of setting fixed font sizes at breakpoints, use clamp() to create type that scales smoothly with the viewport:

The clamp(min, preferred, max) function picks the middle value, clamped between the minimum and maximum. This eliminates the need for font-size media queries in most cases.

Fluid spacing

The same technique works for spacing:

Responsive Images

Images should never overflow their container and should load at an appropriate size:

For art direction or performance, use srcset and sizes to serve different images at different viewport widths:

The browser picks the best image based on viewport width and device pixel ratio.

For different image crops at different sizes, use <picture>:

Container Queries

Container queries let components respond to their parent container's size instead of the viewport. This makes components truly reusable — a card can behave differently in a sidebar versus a main content area:

Responsive Layout Patterns

Sidebar that collapses on mobile

Navigation: horizontal on desktop, bottom bar on mobile

Responsive text truncation

Testing Responsive Designs

1. Browser DevTools — toggle the device toolbar to simulate different viewport sizes.
2. Real devices — always test on an actual phone. Emulators miss touch targets, scrolling behavior, and browser chrome.
3. Resize your browser window — drag the edge to see how layouts reflow. Look for awkward breaks.
4. Check at every width — don't just test at breakpoints. Content between breakpoints matters too.