HTML Responsive Design

What is Responsive Design?

Responsive design means your web page looks good and works well on all screen sizes â€” desktops, tablets, and phones. HTML provides the foundation; CSS handles the layout adjustments.

The Viewport Meta Tag

This is the single most important line for mobile responsiveness. Without it, mobile browsers zoom out to show the full desktop layout.

Viewport Meta Tag

<head>
    <!-- Always include this in every HTML page -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<!-- What each part means:
     width=device-width  â†’ page width = device screen width
     initial-scale=1.0   â†’ no zoom on load
-->

Responsive Images

<!-- Basic responsive image (CSS) -->
<img src="photo.jpg" alt="Photo"
     style="max-width: 100%; height: auto;">

<!-- srcset: serve different sizes based on screen width -->
<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 900px) 800px,
            1200px"
     alt="Responsive photo">

<!-- picture element: art direction (different crops per screen) -->
<picture>
    <!-- Mobile: portrait crop -->
    <source media="(max-width: 600px)" srcset="hero-mobile.jpg">
    <!-- Tablet: square crop -->
    <source media="(max-width: 1024px)" srcset="hero-tablet.jpg">
    <!-- Desktop: wide crop (fallback) -->
    <img src="hero-desktop.jpg" alt="Hero image">
</picture>

<!-- Modern format with fallback -->
<picture>
    <source srcset="photo.webp" type="image/webp">
    <source srcset="photo.avif" type="image/avif">
    <img src="photo.jpg" alt="Photo">
</picture>

Responsive Layout with CSS

Responsive Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Responsive Layout</title>
</head>
<body>
    <header>Header</header>
    <div class="container">
        <main>Main Content</main>
        <aside>Sidebar</aside>
    </div>
    <footer>Footer</footer>
</body>
</html>

/* Mobile first â€” base styles for small screens */
.container {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
}

main  { width: 100%; }
aside { width: 100%; margin-top: 20px; }

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
        gap: 24px;
    }
    main  { flex: 1; }
    aside { width: 280px; flex-shrink: 0; }
}

/* Desktop */
@media (min-width: 1200px) {
    .container { max-width: 1200px; margin: 0 auto; }
}

Responsive Typography

Fluid Typography

/* Fluid font size using clamp(min, preferred, max) */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
h2 { font-size: clamp(1.25rem, 3vw, 2rem); }
p  { font-size: clamp(0.9rem, 2vw, 1.1rem); }

/* Responsive font with media queries */
body { font-size: 14px; }

@media (min-width: 768px)  { body { font-size: 16px; } }
@media (min-width: 1200px) { body { font-size: 18px; } }