CSS Media Queries & Responsive Design Demo

What is Responsive Design?

Responsive design ensures that web pages look good and function well on all devices, from mobile phones to desktop computers. It uses flexible layouts, images, and CSS media queries.

Responsive Grid Layout

This grid automatically adjusts based on screen size:

Auto-Fitting Grid

Card 1

Card 2

Card 3

Card 4

HTML

<div class="responsive-grid">
    <div class="responsive-card">Card 1</div>
    <div class="responsive-card">Card 2</div>
    <div class="responsive-card">Card 3</div>
    <div class="responsive-card">Card 4</div>
</div>

/* Responsive Grid CSS */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

/* Media Queries */
@media (max-width: 768px) {
    .responsive-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1024px) {
    .responsive-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

Mobile-First Design

Start with mobile styles and enhance for larger screens:

Mobile-First Demo

Mobile First Box

Resize your browser to see changes

Colors change based on screen size

HTML

<div class="mobile-first-demo">
    <div class="box">Mobile First Box</div>
    <div class="box">Resize your browser to see changes</div>
    <div class="box">Colors change based on screen size</div>
</div>

/* Mobile-First CSS */
.box {
    background: #10b981;  /* Mobile default */
}

@media (min-width: 768px) {
    .box {
        background: #ef4444;  /* Tablet */
    }
}

@media (min-width: 1024px) {
    .box {
        background: #3b82f6;  /* Desktop */
    }
}

Flexible Layouts

Use Flexbox for responsive layouts:

Flexible Items

Flexible Item 1

Flexible Item 2

Flexible Item 3

Flexible Item 4

HTML

<div class="flexible-layout">
    <div class="flexible-item">Flexible Item 1</div>
    <div class="flexible-item">Flexible Item 2</div>
    <div class="flexible-item">Flexible Item 3</div>
    <div class="flexible-item">Flexible Item 4</div>
</div>

/* Flexible Layout CSS */
.flexible-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.flexible-item {
    flex: 1 1 200px;  /* grow shrink basis */
}

Responsive Navigation

Navigation that adapts to different screen sizes:

Adaptive Navigation

HTML

<div class="navigation-demo">
    <button class="hamburger">☰</button>
    <ul class="nav-menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

This text automatically adjusts its size based on the screen size. On mobile devices, it becomes smaller for better readability, while on desktop it remains larger for comfortable reading.

HTML

<p class="responsive-text">This text automatically adjusts its size based on the screen size.</p>

Responsive Typography

Text that scales appropriately:

Scalable Text

This text automatically adjusts its size based on the screen size. On mobile devices, it becomes smaller for better readability, while on desktop it remains larger for comfortable reading.

HTML

<p class="responsive-text">This text automatically adjusts its size based on the screen size.</p>

/* Responsive Typography CSS */
.responsive-text {
    font-size: 1rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .responsive-text {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .responsive-text {
        font-size: 0.8rem;
    }
}

Common Breakpoints

Mobile

320px - 480px: Small mobile devices

@media (max-width: 480px) { ... }

Tablet

481px - 768px: Tablets and large phones

@media (max-width: 768px) { ... }

Desktop

769px - 1024px: Small desktops and laptops

@media (min-width: 769px) { ... }

Large Desktop

1025px+: Large desktops and monitors

@media (min-width: 1025px) { ... }

Media Query Types

Screen: @media screen { ... }
Print: @media print { ... }
All: @media all { ... }
Min-width: @media (min-width: 768px) { ... }
Max-width: @media (max-width: 768px) { ... }
Orientation: @media (orientation: landscape) { ... }
Resolution: @media (min-resolution: 2dppx) { ... }

Responsive Design Best Practices

Use mobile-first approach
Set viewport meta tag in HTML
Use relative units (rem, em, %, vw, vh)
Make images responsive with max-width: 100%
Use flexible layouts (Flexbox, Grid)
Test on real devices
Consider touch targets for mobile
Optimize for performance

Advanced Media Queries

Dark Mode: @media (prefers-color-scheme: dark)
Reduced Motion: @media (prefers-reduced-motion: reduce)
High Contrast: @media (prefers-contrast: high)
Print Styles: @media print