What is Responsive Web Design?

Defining Responsive Web Design

Responsive Web Design (RWD) is an architectural methodology in front-end development where web interfaces automatically reconfigure their layout, spatial hierarchy, typography, and media based on the user's viewport dimensions, orientation, and device form factor.

Instead of designing isolated, siloed websites for desktop computers and mobile devices (such as old-fashioned m.example.com subdomains), responsive design maintains a single shared codebase and single canonical URL. Whether viewed on a 32-inch 4K desktop monitor, a 6.1-inch smartphone, or the dual-display unfolded canvas of the new iPhone Duo, the application effortlessly adapts to deliver an ergonomic experience.

The 3 Foundational Pillars of Responsive Design

First introduced by Ethan Marcotte in 2010, responsive design was originally built on three core technical tenets:

The Modern Evolution: Container Queries & Dual-Screen Foldables

In 2026, responsive web design has evolved far beyond basic viewport media queries. Today's web applications rely on two game-changing primitives:

1. CSS Container Queries (`@container`)

Instead of responding only to the global browser window, components can now respond directly to the dimensions of their immediate parent container:

/* Define container context */
.card-wrapper {
  container-type: inline-size;
}

/* Respond when card container exceeds 400px, regardless of viewport width */
@container (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

2. Dual-Screen Viewport Segments (iPhone Duo & Foldables)

The arrival of the iPhone Duo introduces two physical displays separated by a 16px central hinge. Standard single-column designs can accidentally place text or clickable buttons directly over the unrendered seam.

To solve this, the W3C and browser engines developed Viewport Segments:

/* Detect iPhone Duo unfolded dual-screen state */
@media (horizontal-viewport-segments: 2) {
  .dashboard-layout {
    display: grid;
    /* Map left column, hinge gap, and right column */
    grid-template-columns: 
      env(viewport-segment-width 0 0) 
      calc(env(viewport-segment-left 1 0) - env(viewport-segment-width 0 0)) 
      env(viewport-segment-width 1 0);
  }
}