Responsive Design and Media Queries

Introduction to Responsive Design

Responsive design ensures your website looks and works great on all devices, from mobile phones to desktop computers. Media queries are the key tool for creating responsive layouts.

Viewport Meta Tag

Always include this in your HTML head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media Query Syntax

/* Basic syntax */
@media media-type and (condition) {
    /* CSS rules */
}

/* Common examples */
@media screen and (max-width: 768px) {
    /* Styles for screens 768px and smaller */
}

@media print {
    /* Styles for printing */
}

Common Breakpoints

/* Mobile First Approach */
/* Base styles for mobile */

@media (min-width: 576px) {
    /* Small devices (landscape phones) */
}

@media (min-width: 768px) {
    /* Medium devices (tablets) */
}

@media (min-width: 992px) {
    /* Large devices (desktops) */
}

@media (min-width: 1200px) {
    /* Extra large devices (large desktops) */
}

Media Query Features

Width and Height

@media (max-width: 600px) { }
@media (min-width: 601px) { }
@media (width: 600px) { }

@media (max-height: 400px) { }
@media (min-height: 401px) { }

Orientation

@media (orientation: portrait) {
    /* Taller than wide */
}

@media (orientation: landscape) {
    /* Wider than tall */
}

Resolution

@media (min-resolution: 2dppx) {
    /* High DPI displays */
}

Responsive Design Techniques

Flexible Images

img {
    max-width: 100%;
    height: auto;
}

/* Responsive background images */
.hero {
    background-image: url("hero-mobile.jpg");
}

@media (min-width: 768px) {
    .hero {
        background-image: url("hero-desktop.jpg");
    }
}

Flexible Typography

/* Responsive font sizes */
h1 {
    font-size: 1.5rem;
}

@media (min-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }
}

/* Fluid typography */
h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);
}

Container Queries (Modern)

.card-container {
    container-type: inline-size;
}

@container (min-width: 300px) {
    .card {
        display: flex;
    }
}

Complete Responsive Example

<style>
/* Base styles (Mobile First) */
* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.header {
    background-color: #007bff;
    color: white;
    padding: 1rem 0;
}

.nav {
    display: none; /* Hidden on mobile */
}

.nav.active {
    display: block;
}

.nav-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

.nav ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
}

.nav li {
    margin-bottom: 0.5rem;
}

.nav a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 0.5rem 0;
}

.hero {
    background-color: #f8f9fa;
    padding: 2rem 0;
    text-align: center;
}

.hero h1 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.grid {
    display: grid;
    gap: 1rem;
    margin: 2rem 0;
}

.card {
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
}

.card img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Tablet Styles */
@media (min-width: 768px) {
    .nav-toggle {
        display: none;
    }
    
    .nav {
        display: block !important;
    }
    
    .nav ul {
        display: flex;
        margin: 0;
    }
    
    .nav li {
        margin-bottom: 0;
        margin-right: 2rem;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .container {
        padding: 0 2rem;
    }
}

/* Desktop Styles */
@media (min-width: 992px) {
    .hero {
        padding: 4rem 0;
    }
    
    .hero h1 {
        font-size: 3rem;
    }
    
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .card {
        padding: 1.5rem;
    }
}

/* Large Desktop */
@media (min-width: 1200px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Print Styles */
@media print {
    .nav,
    .nav-toggle {
        display: none;
    }
    
    body {
        font-size: 12pt;
        color: black;
        background: white;
    }
    
    .card {
        border: 1pt solid black;
        page-break-inside: avoid;
    }
}

/* High DPI Displays */
@media (min-resolution: 2dppx) {
    .hero {
        background-image: url("hero-2x.jpg");
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
</style>

<header class="header">
    <div class="container">
        <button class="nav-toggle" onclick="toggleNav()">☰</button>
        <nav class="nav" id="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
</header>

<section class="hero">
    <div class="container">
        <h1>Responsive Design</h1>
        <p>This layout adapts to different screen sizes</p>
    </div>
</section>

<main class="container">
    <div class="grid">
        <div class="card">
            <img src="/placeholder.svg?height=200&width=300" alt="Card 1">
            <h3>Card 1</h3>
            <p>This card adapts to different screen sizes.</p>
        </div>
        <div class="card">
            <img src="/placeholder.svg?height=200&width=300" alt="Card 2">
            <h3>Card 2</h3>
            <p>Grid layout changes based on viewport width.</p>
        </div>
        <div class="card">
            <img src="/placeholder.svg?height=200&width=300" alt="Card 3">
            <h3>Card 3</h3>
            <p>Mobile-first responsive design approach.</p>
        </div>
        <div class="card">
            <img src="/placeholder.svg?height=200&width=300" alt="Card 4">
            <h3>Card 4</h3>
            <p>Flexible and accessible design patterns.</p>
        </div>
    </div>
</main>

<script>
function toggleNav() {
    const nav = document.getElementById("nav");
    nav.classList.toggle("active");
}
</script>