Responsive Design

Responsive design ensures your website looks great on devices of all sizes, from mobile phones to large desktop monitors.

Mobile-First Approach

Start with mobile design, then add features for larger screens:

/* Mobile first (default) */
body {
    font-size: 14px;
    padding: 10px;
}

.container {
    width: 100%;
}

/* Tablet and up */
@media (min-width: 768px) {
    body {
        font-size: 16px;
        padding: 20px;
    }
    
    .container {
        width: 720px;
        margin: 0 auto;
    }
}

/* Desktop and up */
@media (min-width: 1024px) {
    body {
        font-size: 18px;
    }
    
    .container {
        width: 960px;
    }
}

Media Queries

Media queries apply styles based on device characteristics.

Basic Syntax

@media (condition) {
    /* Styles applied when condition is true */
}

Common Breakpoints

Standard breakpoints for different devices:

/* Mobile phones */
@media (max-width: 480px) {
    /* Portrait phones */
}

/* Tablets */
@media (min-width: 481px) and (max-width: 768px) {
    /* Landscape phones to tablets */
}

/* Large tablets and small laptops */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Medium screens */
}

/* Desktops */
@media (min-width: 1025px) {
    /* Large screens */
}

Media Query Conditions

/* Width-based */
@media (min-width: 600px) { }   /* Minimum width */
@media (max-width: 600px) { }   /* Maximum width */
@media (width: 600px) { }        /* Exact width */

/* Height-based */
@media (min-height: 600px) { }

/* Orientation */
@media (orientation: portrait) { }   /* Portrait orientation */
@media (orientation: landscape) { }  /* Landscape orientation */

/* Device type */
@media (hover: hover) { }        /* Device supports hover */
@media (pointer: fine) { }       /* Device has fine pointer (mouse) */
@media (pointer: coarse) { }     /* Device has coarse pointer (touch) */

/* Color scheme */
@media (prefers-color-scheme: dark) { }   /* Dark mode preference */
@media (prefers-color-scheme: light) { }  /* Light mode preference */

/* Motion preference */
@media (prefers-reduced-motion: reduce) { } /* User prefers less motion */

/* Combining conditions */
@media (min-width: 600px) and (max-width: 900px) { }
@media (max-width: 600px), (min-width: 1200px) { }  /* OR operator */

Responsive Images

Fluid Images

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

Picture Element

Serve different images for different devices:

<picture>
    <source media="(min-width: 1024px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Description">
</picture>

Srcset Attribute

Provide different image sizes:

<img 
    src="medium.jpg"
    srcset="small.jpg 480w,
            medium.jpg 768w,
            large.jpg 1024w"
    alt="Responsive image"
>

Responsive Typography

Font Size

/* Mobile first */
h1 {
    font-size: 24px;
}

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

@media (min-width: 1024px) {
    h1 {
        font-size: 40px;
    }
}

Using Relative Units

/* Better: use relative units */
html {
    font-size: 14px;
}

h1 {
    font-size: 2rem;     /* 2 × 14px = 28px on mobile */
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
    
    h1 {
        font-size: 2rem;  /* 2 × 16px = 32px on tablet */
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 18px;
    }
    
    h1 {
        font-size: 2rem;  /* 2 × 18px = 36px on desktop */
    }
}

Responsive Layouts

Flex-based Responsive Layout

<style>
    .container {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .sidebar {
        width: 100%;
    }
    
    @media (min-width: 768px) {
        .container {
            flex-direction: row;
        }
        
        .sidebar {
            width: 250px;
            flex-shrink: 0;
        }
        
        .main {
            flex: 1;
        }
    }
</style>

<div class="container">
    <main class="main">Main content</main>
    <aside class="sidebar">Sidebar</aside>
</div>

Grid-based Responsive Layout

<style>
    .dashboard {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    @media (min-width: 768px) {
        .dashboard {
            grid-template-columns: 1fr 250px;
        }
    }
    
    @media (min-width: 1024px) {
        .dashboard {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }
</style>

<div class="dashboard">
    <article>Article 1</article>
    <article>Article 2</article>
    <article>Article 3</article>
    <article>Article 4</article>
</div>

Responsive Navigation

Mobile Menu (Hamburger)

<style>
    .nav-toggle {
        display: none;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
    }
    
    .nav-menu {
        display: flex;
        list-style: none;
        gap: 20px;
        margin: 0;
        padding: 0;
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    @media (max-width: 768px) {
        .nav-toggle {
            display: block;
        }
        
        .nav-menu {
            display: none;
            position: absolute;
            top: 60px;
            left: 0;
            width: 100%;
            flex-direction: column;
            background-color: navy;
            padding: 20px;
            gap: 10px;
        }
        
        .nav-menu.active {
            display: flex;
        }
        
        .nav-menu a {
            color: white;
            text-decoration: none;
        }
    }
</style>

<nav>
    <button class="nav-toggle">☰</button>
    <ul class="nav-menu">
        <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>

<script>
    document.querySelector('.nav-toggle').addEventListener('click', function() {
        document.querySelector('.nav-menu').classList.toggle('active');
    });
</script>

Real-World Responsive Project

Complete responsive landing page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Website</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            font-size: 14px;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        
        /* Header */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background-color: navy;
            color: white;
        }
        
        .logo {
            font-weight: bold;
            font-size: 20px;
        }
        
        /* Navigation */
        nav a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
            display: inline-block;
        }
        
        @media (max-width: 768px) {
            header {
                flex-direction: column;
                gap: 15px;
            }
            
            nav {
                width: 100%;
                text-align: center;
            }
            
            nav a {
                display: block;
                margin: 10px 0;
            }
        }
        
        /* Main Content */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .hero {
            background-color: #f0f0f0;
            padding: 40px 20px;
            text-align: center;
            border-radius: 8px;
            margin-bottom: 40px;
        }
        
        .hero h1 {
            font-size: 2rem;
            margin-bottom: 10px;
        }
        
        /* Grid Layout */
        .cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .card {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        @media (min-width: 768px) {
            html {
                font-size: 16px;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
        }
        
        @media (min-width: 1024px) {
            html {
                font-size: 18px;
            }
            
            .hero h1 {
                font-size: 3rem;
            }
        }
        
        /* Footer */
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">MyBrand</div>
        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Contact</a>
        </nav>
    </header>
    
    <div class="container">
        <section class="hero">
            <h1>Welcome</h1>
            <p>Create beautiful responsive websites</p>
        </section>
        
        <div class="cards">
            <div class="card">
                <h3>Feature 1</h3>
                <p>Description here</p>
            </div>
            <div class="card">
                <h3>Feature 2</h3>
                <p>Description here</p>
            </div>
            <div class="card">
                <h3>Feature 3</h3>
                <p>Description here</p>
            </div>
        </div>
    </div>
    
    <footer>
        <p>&copy; 2024 MyBrand. All rights reserved.</p>
    </footer>
</body>
</html>

Best Practices

1. Mobile First - Start with mobile, enhance for larger screens
2. Flexible Units - Use %, em, rem instead of fixed px
3. Test on Real Devices - Don't rely only on browser DevTools
4. Use Semantic HTML - Makes responsive design easier
5. Test All Breakpoints - Check multiple screen sizes
6. Optimize Images - Serve different sizes for different devices
7. Check Performance - Responsive sites should still be fast
8. Use DevTools - Test responsive layouts in browser

Testing Tools

• Chrome DevTools - Built-in responsive testing
• Firefox DevTools - Similar functionality
• Responsively App - Dedicated responsive testing tool
• BrowserStack - Test on real devices

Next Steps

Master responsive design, then learn:

1. Styling & Typography - Colors and fonts
2. Animations & Transitions - Add motion
3. Advanced Techniques - Advanced effects