Responsive Web Design (MDN)
MDN’s tutorial on responsive web design, covering CSS layout techniques (flexbox, grid, viewport units), breakpoint selection, fluid images, and the viewport meta tag.
License: CC BY-SA 2.5+, same license family as Wikipedia and the other MDN sources already cited.
Key points
- Breakpoints should be chosen at whatever width the content itself starts to look bad — a squashed two-word line, an awkwardly wide column — rather than targeting specific named devices; best practice defines them with relative units, not the pixel dimensions of a particular phone or tablet.
- The viewport meta tag is the specific piece of markup that makes responsive layouts actually work on mobile browsers, and it’s easy to omit:
<meta name="viewport" content="width=device-width, initial-scale=1">. Without it, a mobile browser defaults to rendering the page at a fixed desktop-like width (historically 980px) and showing a zoomed-out version of that layout, which defeats breakpoints and media queries entirely — a narrow-screen layout defined at 480px never triggers if the browser is telling the page it’s 980px wide. - Fluid images are constrained with
max-width: 100%so they never overflow a narrowing container, but intentionally don’t grow past their own intrinsic size in a wide one — scaling down to fit, without upscaling into visible pixelation.