Responsive design means one HTML/CSS codebase that adapts to different viewport sizes instead of separate mobile and desktop sites. Users get a usable layout on phone, tablet, and desktop.

Three pillars: fluid layout (relative units and flexible containers), media queries (different styles at breakpoints), and responsive assets (images and touch targets that scale).

Use relative units (%, em, rem, vw/ vh) so layout scales. rem is tied to the root font size and is predictable for spacing and typography; em is relative to the element’s font size.

Avoid fixed pixel widths for containers; use max-width and width: 100% so content can shrink on small screens. Flexbox and Grid with fr and minmax() make columns and gaps adapt automatically.

@media (min-width: 768px) (and similar) let you change styles at breakpoints. Common approach: start with mobile styles (mobile-first), then add rules for larger screens. Query on width, height, orientation, or prefers-reduced-motion.

Use media queries to switch layout (e.g. from single column to grid), adjust font sizes, or show/hide elements. Keep breakpoints consistent (e.g. 640, 768, 1024 px) or use CSS custom properties. One breakpoint for tablet and one for desktop is often enough.

img with srcset and sizes (or picture) serves the right resolution and crop for the viewport. Use max-width: 100% and height: auto so images scale. On touch devices, ensure tap targets are at least 44×44 px so fingers can hit them reliably.

Learn more: [MDN – Responsive web design](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) (Media queries, Responsive images).