Responsive Design

How to build a layout that works from a phone screen to a desktop monitor: the viewport meta tag, media queries, fluid units, and responsive images.

1. The Viewport and Media Queries The viewport meta tag stops mobile browsers from rendering a shrunk-down desktop page, and @media queries let you apply different CSS at different screen widths.
2. Fluid Layouts Building layouts from relative units and wrapping Flexbox/Grid instead of fixed pixel widths, plus clamp() for typography and spacing that scale continuously without extra media queries.
3. Responsive Images and Mobile-First Workflow Serving the right image size with srcset/sizes, swapping images entirely with <picture>, and why writing CSS mobile-first (min-width up) beats desktop-first (max-width overrides down).