HTML Responsive
Making web pages work on all devices
📱 What is Responsive HTML?
Responsive HTML creates web pages that look good on all devices - desktops, tablets, and phones. It automatically adjusts to different screen sizes.
<!-- The viewport meta tag makes pages responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The Viewport Meta Tag
Always include this tag in your HTML head section:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Page</title>
</head>
<body>
<h1>This page works on all devices!</h1>
</body>
</html>What it does:
- width=device-width: Match screen width
- initial-scale=1.0: Set initial zoom level
🔹 Responsive Images
Make images scale with the screen size:
<!-- Responsive image -->
<img src="photo.jpg" alt="Photo" style="max-width: 100%; height: auto;">
<!-- Using CSS class -->
<style>
.responsive-img {
max-width: 100%;
height: auto;
}
</style>
<img src="photo.jpg" alt="Photo" class="responsive-img">Result:
Responsive Image (scales with container)
🔹 Responsive Text
Use relative units for text that scales:
<style>
/* Responsive text sizes */
h1 { font-size: 2em; } /* 2 times parent size */
p { font-size: 1em; } /* Same as parent size */
small { font-size: 0.8em; } /* 80% of parent size */
</style>
<h1>Big Heading</h1>
<p>Normal text</p>
<small>Small text</small>Output:
Big Heading
Normal text
Small text