Responsive and modern CSS
Responsive foundations
Build flexible pages that respond to content, container space, zoom, text settings, and input methods instead of a list of device models.
8 minute lesson
Responsive design is not only about phone widths. A page must handle long text, browser zoom, split-screen windows, large fonts, touch input, and unknown content.
Start with intrinsic, flexible foundations:
img {
max-width: 100%;
height: auto;
}
.page {
width: min(100% - 2rem, 70rem);
margin-inline: auto;
}The image can shrink without exceeding its intrinsic proportions. The page follows its container until reaching a readable maximum. Neither rule needs to know a device name.
Let normal flow, wrapping, min(), max(), clamp(), Flexbox, and Grid solve as much as possible before adding a breakpoint. Prefer max-width or a flexible basis to a fixed width, and avoid fixed heights around text.
Do not disable zoom or assume a fixed viewport. Test by resizing, zooming, increasing text size, and replacing short sample content with realistic extremes.
Also test input differences. A coarse pointer needs generous targets, while a keyboard needs visible focus and logical order. Responsive design includes capabilities and preferences, not only geometry.
Use DevTools responsive mode as one source of evidence, then resize a real browser window and zoom to 200%. Emulation presets are examples, not the boundaries of the web.
Lesson completed