HuntExams Academy
HTML/CSSIntermediate#css#responsive

What is the difference between responsive and adaptive design?

Responsive design uses fluid grids and media queries to continuously adapt to any screen size. Adaptive design uses a set of fixed, predefined layouts that switch at specific breakpoints, often serving different markup per device class.

Example
/* Responsive: fluid width */
.container { width: 90%; max-width: 1200px; }
/* Adaptive: fixed breakpoint layouts */
@media (max-width: 600px) { .container { width: 320px; } }

Related Questions

1
HTML/CSSBeginner#css#units

What are the different CSS units (px, em, rem, %, vw, vh) and when to use them?

Open
2
HTML/CSSIntermediate#css#variables

What are CSS custom properties (variables) and how do you use them?

Open
3
HTML/CSSBeginner#css#selectors

What is the difference between pseudo-classes and pseudo-elements?

Open