Responsive design — mobile first, media and container queries — HTML5 & CSS3 — Semantic Markup to Responsive Layouts

8. Responsive design — mobile first, media and container queries

Intermediate★ Must knowLesson 8 of 11

<meta name="viewport" content="width=device-width, initial-scale=1"> — without it phones render a zoomed-out desktop page.
Mobile first: base styles for small screens, then min-width media queries add layout for larger ones.
Fluid layouts: %, fr, minmax(), clamp(), max-width instead of fixed widths.
Responsive images: max-width: 100%; height: auto;, srcset/sizes, <picture>, loading="lazy".

css

.layout { display: grid; gap: 16px; }                        /* phone: one column */
@media (min-width: 768px)  { .layout { grid-template-columns: 1fr 1fr; } }      /* tablet */
@media (min-width: 1200px) { .layout { grid-template-columns: 250px 1fr 300px; } } /* desktop */

h1 { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); }        /* fluid type, no breakpoints */

/* Container query: a card adapts to the space it is placed in, not the viewport */
.card-wrap { container-type: inline-size; }
@container (min-width: 400px) { .card { display: flex; gap: 12px; } }

@media (prefers-color-scheme: dark) { :root { --bg: #111; --text: #eee; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

Common breakpoints (Bootstrap 5): 576, 768, 992, 1200, 1400 px — but choose breakpoints where your content breaks.