HTML Responsive Design
Responsive design ensures web pages look good on all screen sizes, from phones to desktops. It starts with the viewport meta tag and continues with flexible CSS like percentages, Flexbox, Grid, and media queries.
Without the viewport meta tag, mobile browsers render pages at desktop width and zoom out, making text and images too small to use comfortably.
<meta name="viewport" content="width=device-width, initial-scale=1.0">The viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0"> tells the browser to match the page width to the device's screen width.
Responsive images and media queries
Use max-width:100% on images so they shrink within their container. CSS media queries apply different styles at different screen widths.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>(page scales correctly on mobile devices)This meta tag is essential for any mobile-friendly page.
<img src="photo.jpg" style="max-width:100%; height:auto;" alt="Responsive photo">(image shrinks to fit its container)max-width:100% prevents images from overflowing smaller screens.
Key points
- The viewport meta tag is the foundation of responsive design.
- max-width:100% keeps images from overflowing their container.
- Media queries apply CSS conditionally based on screen size.
- Flexbox and Grid naturally adapt to different screen widths.