Create a responsive design

Build mobile-first with fluid layouts (flex/grid), relative units, and a small set of meaningful breakpoints driven by content — not devices. Add the viewport meta tag, use responsive images, and test on real constraints.

6 min read·~10 min to think through

Responsive design means one codebase that adapts to any viewport. The modern approach is mobile-first, content-driven, and fluid by default — breakpoints are the exception, not the foundation.

Foundations

Viewport meta tag — without it mobile browsers render at 980px and zoom out:

``html <meta name="viewport" content="width=device-width, initial-scale=1" /> ``

Mobile-first CSS — write the base styles for small screens, then min-width media queries layer on enhancements. Smaller default payload, simpler overrides.
Box sizing — * { box-sizing: border-box; } so padding doesn't blow out widths.

Fluid layout over fixed pixels

Flexbox for one-dimensional rows/columns; Grid for two-dimensional page layouts.
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) gives a responsive card grid with zero media queries.
Relative units: rem for typography/spacing, %/fr for layout, ch for line length, clamp() for fluid type — font-size: clamp(1rem, 2.5vw, 1.5rem).

Breakpoints

Choose them where the content breaks, not at iPhone/iPad widths.
Keep the set small (e.g. ~640 / 768 / 1024 / 1280).
Container queries (@container) let a component respond to its own width — better than viewport queries for reusable components.

Responsive media

<img srcset> + sizes, or <picture> for art direction.
img { max-width: 100%; height: auto; } so images never overflow.
Use aspect-ratio to reserve space and prevent layout shift.

Verify

DevTools device toolbar, but also a real low-end phone.
Test landscape, large font sizes (accessibility zoom), and slow networks.
Check touch target sizes (~44px) and that nothing requires hover.

Follow-up questions

•When would you use a container query instead of a media query?
•How does clamp() reduce the number of breakpoints you need?
•Why mobile-first rather than desktop-first?
•How do you prevent layout shift from images?

Common mistakes

•Picking breakpoints based on specific devices instead of where the content breaks.
•Forgetting the viewport meta tag, so the mobile layout never engages.
•Using fixed pixel widths that overflow small screens.
•Desktop-first CSS that ships heavy styles to mobile and overrides them down.

Performance considerations

•Mobile-first keeps the default CSS payload small. Responsive images (srcset/picture) avoid shipping desktop-sized images to phones. Reserve space with aspect-ratio to keep CLS low. Avoid huge background images behind media queries that still download.

Edge cases

•Very large accessibility font sizes breaking fixed-height containers.
•Landscape orientation on short viewports hiding key UI.
•Foldable devices and ultra-wide monitors at the extremes.
•Hover-dependent UI being unusable on touch devices.

Real-world examples

•A product grid using auto-fit/minmax that reflows from 1 to 4 columns with no media queries.
•Fluid typography with clamp() so headings scale smoothly between phone and desktop.
•A card component using container queries so it adapts in a sidebar vs a main column.

Senior engineer discussion

Seniors push past media queries: intrinsic layouts (auto-fit/minmax, flex-wrap), clamp() for fluid type, and container queries for truly reusable components. They also tie responsiveness to performance (don't ship desktop images to phones) and accessibility (zoom, touch targets, reduced motion), and treat breakpoints as a content decision the design system encodes once.