Responsive Web Design

Why one site must work at every screen size, and the three ideas behind responsive design.

What the viewport meta tag does, why pages look tiny without it, and settings that harm accessibility.

Write base styles for small screens and enhance for larger ones with min-width queries.

Media query syntax, range syntax, and querying user preferences such as dark mode and reduced motion.

Serve the right image size and format for each screen with srcset, sizes and the picture element.

Scale type and spacing smoothly between screen sizes with clamp(), and keep text zoomable.

Intrinsic layouts that adapt by themselves with flex-wrap, auto-fit and minmax().

Find breakpoints where the layout breaks instead of copying device widths, and how many you really need.

Keep tables, code blocks and embeds usable on small screens without breaking the page.

Device emulation, zoom testing at 200 and 400 percent, real-device testing and common responsive bugs.

Make components respond to their container instead of the viewport, with container-type, @container and cq units.

Menus that adapt from desktop to mobile: priority, off-canvas and disclosure patterns, with accessibility built in.

Why 100vh breaks on mobile, and how small, large and dynamic viewport units fix full-height layouts.