Detailed explanation
Responsive and adaptive design are two approaches to making interfaces work across different screen sizes. Responsive design uses flexible layouts that adjust continuously to the available viewport width, with breakpoints for changes such as stacking columns or collapsing navigation. Adaptive design selects from a finite set of predefined layouts, commonly associated with small, medium, and large screens. The main distinction is continuous flexibility versus discrete layout selection, not whether media queries are present.
Under the hood, responsive layouts combine percentage widths, flexible Grid or Flexbox tracks, constraints such as min-width and max-width, and flexible images. For example, .container { width: 90%; max-width: 1200px; } grows with its containing block until it reaches its cap. Media queries can then change the number of columns when content becomes cramped. An adaptive layout might instead use a 320px-wide container on small screens and wider fixed containers at subsequent breakpoints. Between those breakpoints, its chosen layout stays largely unchanged. Both approaches can use CSS media queries; adaptive implementations may also select templates through JavaScript or server-side detection, but different markup is not required.
Responsive design is generally a practical default for websites that must support many viewport sizes, including resized desktop windows and split-screen views. Its flexibility reduces the need to maintain separate layouts, although each component still needs testing for overflow, readability, and interaction. Adaptive design can provide tighter control over carefully chosen layouts and may suit an existing system with distinct interface variants. However, supporting more screen ranges can increase design, implementation, and testing effort. Neither approach automatically guarantees better performance or accessibility; assets, DOM structure, loading strategy, and interaction design remain important.
In an interview, explain the behaviour between breakpoints rather than just naming technologies. The supplied fixed-width example illustrates an adaptive-style rule, but it is not a complete adaptive system and can overflow a viewport narrower than 320px. A real interface can mix fluid containers with discrete structural changes, so the labels are not always strict. Interviewers typically look for an accurate distinction, awareness of trade-offs, and content-driven breakpoint choices rather than assumptions about particular phones or tablets.
Key points to remember
- Responsive layouts flex continuously; adaptive layouts select predefined variants.
- Both approaches can use media queries and breakpoints.
- Responsive design commonly combines fluid sizing, Grid or Flexbox, and flexible images.
- Adaptive design does not require device detection or different HTML.
- Test intermediate widths, content overflow, accessibility, and performance with either approach.
Common mistakes candidates make
- Claiming that responsive design uses media queries while adaptive design does not.
- Assuming every breakpoint-based layout is adaptive, even when its dimensions remain fluid.
- Treating a single fixed-width rule as a complete adaptive design and ignoring narrower viewports.
Likely follow-up questions
How should you choose breakpoints?
Choose breakpoints where the content or layout stops working well, such as when navigation wraps or columns become too narrow. Test representative devices, but avoid relying only on named device widths.
Is mobile-first design the same as responsive design?
No: mobile-first is an implementation strategy that starts with small-screen base styles and adds enhancements, typically through min-width media queries. Responsive design describes layout behaviour and can be implemented mobile-first or desktop-first.
Can a website combine responsive and adaptive techniques?
Yes: a site can use fluid containers while switching between predefined component arrangements at certain widths. Describe its actual sizing and switching behaviour rather than forcing the entire site into one label.
Interview tip: Start with continuous flexibility versus predefined layouts, illustrate how each behaves between breakpoints, and finish with one practical trade-off.