Question 1

What is responsive design vs adaptive design?

Accepted Answer

Responsive fluidly reflows; adaptive often switches discrete layouts/breakpoints. Modern sites mix both: fluid type/grids plus breakpoint redesigns.

Question 2

Explain mobile-first media queries.

Accepted Answer

Base styles for small screens; min-width queries enhance upward. Avoid fighting desktop-first overrides. Test real devices, not only narrow desktop windows.

Question 3

Viewport meta tag — what does it do?

Accepted Answer

Controls layout viewport on mobile so CSS pixels match device appropriately. width=device-width, initial-scale=1 is standard. Accessibility: avoid disabling zoom.

Question 4

Container queries vs media queries?

Accepted Answer

Container queries respond to parent size; media queries to viewport/device features. @container enables component-level responsiveness in different layout contexts.

Question 5

Fluid typography approaches?

Accepted Answer

clamp() with viewport units, or container-based type; modular scales. Avoid tiny/huge extremes. Prefer rem roots. Test zoom and localization length.

Question 6

How do you choose breakpoints?

Accepted Answer

Content-driven when layout breaks, not device pantheon lists. Start from design comps but validate with real content. Prefer fewer breakpoints.

Question 7

Responsive images in CSS context?

Accepted Answer

Use max-width:100%; height:auto; object-fit; optionally image-set. Still need HTML srcset/picture for art direction and bandwidth.

Question 8

Common responsive nav patterns?

Accepted Answer

Priority+ overflow, hamburger disclosure, multi-level with focus traps. Ensure keyboard access and visible labels. Don't rely on hover alone.

Question 9

What are svh, lvh, dvh?

Accepted Answer

Small/large/dynamic viewport height units addressing mobile browser chrome. 100vh bugs on mobile; prefer dvh/svh thoughtfully for full-screen sections.

Question 10

How do prefers-reduced-motion and prefers-color-scheme fit responsive thinking?

Accepted Answer

Respond to user preferences like other environmental features. Media queries aren't only width. Build inclusive defaults.

Question 11

Debug a layout that breaks only between two widths.

Accepted Answer

Find the conflicting query, inflexible widths, overflow ancestors, or grid track mins. Use DevTools responsive mode and show media query ranges.

Question 12

Architect responsive tokens and breakpoints for a DS.

Accepted Answer

Shared breakpoint aliases, container query names, fluid type/spacing tokens, documented usage. Avoid per-feature one-off breakpoints proliferating.

Responsive CSS Interview Questions

Other CSS interview topics