What is the difference between responsive and adaptive design?

The short answer

Responsive design uses fluid layouts that continuously adjust to any screen size using percentages, flexbox, grid, and media queries. Adaptive design creates fixed layouts for specific screen sizes (like 320px, 768px, 1024px) and serves the appropriate one. Responsive is more flexible and is the standard approach today.

Responsive design

The layout flows and adjusts to any viewport width:

Copy
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
.grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(300px, 1fr)
  );
  gap: 24px;
}
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

The layout stretches, shrinks, and rearranges smoothly as the screen size changes. There are no fixed breakpoints for the overall layout — it works at any width.

Adaptive design

The layout snaps to fixed sizes at specific breakpoints:

Copy
.container {
  width: 320px; /* mobile */
}
@media (min-width: 768px) {
  .container {
    width: 768px; /* tablet */
  }
}
@media (min-width: 1024px) {
  .container {
    width: 1024px; /* desktop */
  }
}

Between breakpoints, the layout does not change — it jumps from one fixed layout to another.

Which to use

Responsive (recommended):

• Works on any screen size, including ones you did not plan for
• Easier to maintain — one codebase
• Better for future-proofing as new devices appear

Adaptive:

• More control over exactly how the layout looks at each size
• Can be easier when retrofitting an old desktop site for mobile
• Sometimes used for very specific design requirements

In practice, most modern websites use responsive design. You might use adaptive techniques occasionally within a responsive layout (like showing a completely different component on mobile vs desktop).

Why interviewers ask this

This tests if you understand modern layout approaches. Interviewers want to see if you know the difference and can choose the right approach. Most candidates should default to responsive design unless there is a specific reason for adaptive.