Media Queries - Responsive Design

What are Media Queries?

Media Queries allow you to apply CSS styles based on device characteristics like screen size, orientation, resolution, and more. They are the foundation of responsive web design.

Why Use Media Queries?

Media queries enable:

Responsive layouts - Adapt to different screen sizes
Mobile-first design - Optimize for mobile devices
Better UX - Tailored experience for each device
Print styles - Different styles for printing

Media Query Syntax

Basic syntax:

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

Common patterns:

/* Mobile first (min-width) */
@media (min-width: 768px) {
    /* Styles for tablets and up */
}

/* Desktop first (max-width) */
@media (max-width: 767px) {
    /* Styles for mobile */
}

/* Range */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Styles for tablets only */
}

Common Breakpoints

Device	Breakpoint	Media Query
Mobile	< 576px	`@media (max-width: 575px)`
Small tablets	≥ 576px	`@media (min-width: 576px)`
Tablets	≥ 768px	`@media (min-width: 768px)`
Desktops	≥ 992px	`@media (min-width: 992px)`
Large desktops	≥ 1200px	`@media (min-width: 1200px)`
Extra large	≥ 1400px	`@media (min-width: 1400px)`

Detailed Examples

1. Mobile-First Approach

HTML Example:

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

CSS Example:

/* Mobile styles (default) */
.container {
    display: flex;
    flex-direction: column;
}

.sidebar {
    width: 100%;
    background-color: #f0f0f0;
    padding: 20px;
}

.main {
    width: 100%;
    padding: 20px;
}

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
    }
    
    .sidebar {
        width: 250px;
    }
    
    .main {
        flex: 1;
    }
}

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

2. Desktop-First Approach

/* Desktop styles (default) */
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Tablet */
@media (max-width: 1024px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 576px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

3. Hide/Show Elements

/* Desktop navigation */
.desktop-nav {
    display: flex;
}

.mobile-menu-button {
    display: none;
}

/* Mobile */
@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }
    
    .mobile-menu-button {
        display: block;
    }
}

4. Responsive Typography

/* Mobile */
h1 {
    font-size: 1.75rem;
}

p {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Tablet */
@media (min-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }
    
    p {
        font-size: 1rem;
        line-height: 1.6;
    }
}

/* Desktop */
@media (min-width: 1200px) {
    h1 {
        font-size: 3rem;
    }
    
    p {
        font-size: 1.125rem;
        line-height: 1.7;
    }
}

5. Responsive Grid

.card-grid {
    display: grid;
    gap: 20px;
}

/* Mobile: 1 column */
@media (max-width: 575px) {
    .card-grid {
        grid-template-columns: 1fr;
    }
}

/* Tablet: 2 columns */
@media (min-width: 576px) and (max-width: 991px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3 columns */
@media (min-width: 992px) and (max-width: 1199px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

Media Features

1. Width-based

/* Exact width */
@media (width: 768px) { }

/* Minimum width */
@media (min-width: 768px) { }

/* Maximum width */
@media (max-width: 767px) { }

/* Range */
@media (min-width: 768px) and (max-width: 1024px) { }

2. Height-based

/* Minimum height */
@media (min-height: 600px) {
    .hero {
        height: 100vh;
    }
}

/* Short screens */
@media (max-height: 500px) {
    .header {
        height: 50px;
    }
}

3. Orientation

/* Portrait (height > width) */
@media (orientation: portrait) {
    .container {
        flex-direction: column;
    }
}

/* Landscape (width > height) */
@media (orientation: landscape) {
    .container {
        flex-direction: row;
    }
}

4. Resolution (Retina displays)

/* Standard resolution */
.logo {
    background-image: url('logo.png');
}

/* High resolution (Retina) */
@media (min-resolution: 2dppx) {
    .logo {
        background-image: url('logo@2x.png');
    }
}

5. Hover Capability

/* Devices that can hover (desktop) */
@media (hover: hover) {
    .button:hover {
        background-color: #0056b3;
    }
}

/* Touch devices (no hover) */
@media (hover: none) {
    .button:active {
        background-color: #0056b3;
    }
}

6. Dark Mode

/* Light mode (default) */
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --text-color: #f0f0f0;
    }
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

7. Print Styles

/* Screen styles */
.no-print {
    display: block;
}

/* Print styles */
@media print {
    .no-print {
        display: none;
    }
    
    body {
        font-size: 12pt;
        color: black;
        background: white;
    }
    
    a {
        text-decoration: underline;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
    }
}

Common Patterns

Pattern 1: Responsive Container

.container {
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* Mobile menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: white;
}

.mobile-menu.active {
    display: block;
}

.hamburger {
    display: block;
}

.desktop-nav {
    display: none;
}

/* Desktop */
@media (min-width: 768px) {
    .hamburger {
        display: none;
    }
    
    .desktop-nav {
        display: flex;
    }
    
    .mobile-menu {
        display: none !important;
    }
}

Pattern 3: Responsive Images

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

/* Different images for different sizes */
.hero-image {
    background-image: url('hero-mobile.jpg');
}

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

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

Best Practices

Mobile-first approach - Start with mobile styles, add complexity for larger screens
Use relative units - rem, em, % instead of px
Test on real devices - Emulators aren't perfect
Limit breakpoints - 3-5 breakpoints are usually enough
Group media queries - Keep related styles together

Media Queries - Responsive Design

Media Queries - Responsive Design

What are Media Queries?

Why Use Media Queries?

Media Query Syntax

Common Breakpoints

Detailed Examples

1. Mobile-First Approach

2. Desktop-First Approach

3. Hide/Show Elements

4. Responsive Typography

5. Responsive Grid

Media Features

1. Width-based

2. Height-based

3. Orientation

4. Resolution (Retina displays)

5. Hover Capability

6. Dark Mode

7. Print Styles

Common Patterns

Pattern 1: Responsive Container

Pattern 2: Hamburger Menu

Pattern 3: Responsive Images

Best Practices

On this page