CSS · Chapter 26 of 44
CSS Responsive Design
Responsive design means building web pages that adapt to different screen sizes, from phones to desktops, using flexible layouts, relative units, and responsive images.
A key ingredient is the viewport meta tag, which tells mobile browsers to render the page at the device's actual width rather than zoomed out.
Syntax
<meta name="viewport" content="width=device-width, initial-scale=1.0">Flexible layouts and units
Using percentages, fr, and max-width instead of fixed pixel widths lets layouts adapt naturally to varying screen sizes.
The viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0"> ensures mobile browsers scale the page correctly instead of showing a zoomed-out desktop view.
Example 1 (css)
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}Output
A container that fills small screens but caps at 1200px on large oneswidth: 100% with max-width creates a fluid, responsive container.
Key points
- Responsive design adapts layouts to different screen sizes.
- The viewport meta tag is essential for mobile rendering.
- Relative units (%, fr, em) adapt better than fixed pixels.
- max-width prevents content from stretching too wide on large screens.
💡 Note: Design mobile-first, then progressively enhance for larger screens.