CSS — Responsive Design & Media Queries

Introduction

Responsive web design ensures your websites look and function well on all devices, from mobile phones to desktop computers. Media queries are the primary tool for creating responsive designs, allowing you to apply different styles based on device characteristics like screen width, height, orientation, and resolution. This tutorial covers modern responsive design techniques and best practices.

Responsive Design Fundamentals

Mobile-First Approach

css

/* Mobile-first CSS: Start with mobile styles */
.container {
    width: 100%;
    padding: 1rem;
    background-color: #f8f9fa;
}

.navigation {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-item {
    padding: 0.75rem;
    background-color: white;
    border-radius: 4px;
    text-align: center;
}

/* Then enhance for larger screens */
@media (min-width: 768px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }
    
    .navigation {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .nav-item {
        background-color: transparent;
        text-align: left;
    }
}

Viewport Meta Tag

html

<!-- Essential for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

css

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

Media Query Syntax and Types

Basic Media Query Structure

css

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

/* Width-based queries (most common) */
@media (min-width: 768px) {
    .desktop-only {
        display: block;
    }
}

@media (max-width: 767px) {
    .mobile-only {
        display: block;
    }
}

/* Range queries (modern syntax) */
@media (768px <= width < 1024px) {
    .tablet-only {
        display: block;
    }
}

/* Multiple conditions */
@media (min-width: 768px) and (max-width: 1023px) {
    .tablet-range {
        background-color: lightblue;
    }
}

/* OR conditions */
@media (min-width: 768px), (orientation: landscape) {
    .tablet-or-landscape {
        padding: 2rem;
    }
}

Media Types and Features

css

/* Media types */
@media screen and (min-width: 768px) {
    /* Styles for screens */
}

@media print {
    /* Styles for printing */
    .no-print {
        display: none;
    }
    
    body {
        color: black;
        background: white;
    }
}

/* Height queries */
@media (min-height: 600px) {
    .tall-screen {
        margin-top: 4rem;
    }
}

/* Orientation queries */
@media (orientation: portrait) {
    .portrait-layout {
        flex-direction: column;
    }
}

@media (orientation: landscape) {
    .landscape-layout {
        flex-direction: row;
    }
}

/* Resolution queries */
@media (min-resolution: 2dppx) {
    /* High DPI displays */
    .logo {
        background-image: url('logo@2x.png');
        background-size: 100px 50px;
    }
}

/* Preference-based queries */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: white;
    }
}

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

Breakpoint Strategies

Common Breakpoints

css

/* Mobile-first breakpoint system */
:root {
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
}

/* Extra small devices (phones) */
.responsive-element {
    font-size: 14px;
    padding: 0.5rem;
}

/* Small devices (landscape phones) */
@media (min-width: 576px) {
    .responsive-element {
        font-size: 16px;
        padding: 0.75rem;
    }
}

/* Medium devices (tablets) */
@media (min-width: 768px) {
    .responsive-element {
        font-size: 18px;
        padding: 1rem;
    }
}

/* Large devices (desktops) */
@media (min-width: 992px) {
    .responsive-element {
        font-size: 20px;
        padding: 1.25rem;
    }
}

/* Extra large devices (large desktops) */
@media (min-width: 1200px) {
    .responsive-element {
        font-size: 22px;
        padding: 1.5rem;
    }
}

Content-Based Breakpoints

css

/* Breakpoints based on content, not devices */
.article {
    font-size: 16px;
    line-height: 1.6;
}

/* When text becomes hard to read */
@media (min-width: 45em) {
    .article {
        font-size: 18px;
        line-height: 1.7;
        max-width: 65ch; /* Optimal reading width */
    }
}

/* When sidebar can fit comfortably */
@media (min-width: 60em) {
    .layout {
        display: grid;
        grid-template-columns: 250px 1fr;
        gap: 2rem;
    }
}

Responsive Layout Patterns

Navigation Patterns

css

/* Mobile hamburger navigation */
.nav-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-menu.open {
    display: block;
}

.nav-item {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid #eee;
}

/* Desktop navigation */
@media (min-width: 768px) {
    .nav-toggle {
        display: none;
    }
    
    .nav-menu {
        display: flex;
        position: static;
        width: auto;
        background-color: transparent;
        box-shadow: none;
    }
    
    .nav-item {
        border-bottom: none;
        padding: 0.5rem 1rem;
    }
}

Card Grid Responsive Pattern

css

.card-grid {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

/* Mobile: 1 column */
.card-grid {
    grid-template-columns: 1fr;
}

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

/* Desktop: 3 columns */
@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        padding: 2rem;
    }
}

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

Sidebar Responsive Pattern

css

.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sidebar {
    background-color: #f8f9fa;
    padding: 1rem;
    order: 2; /* Sidebar after main on mobile */
}

.main-content {
    flex: 1;
    padding: 1rem;
    order: 1; /* Main content first on mobile */
}

@media (min-width: 768px) {
    .layout {
        flex-direction: row;
    }
    
    .sidebar {
        flex: 0 0 250px;
        order: 0; /* Sidebar first on desktop */
    }
    
    .main-content {
        order: 0;
        padding: 2rem;
    }
}

Responsive Typography

Fluid Typography

css

/* Fluid font sizes using clamp() */
.responsive-heading {
    font-size: clamp(1.5rem, 4vw, 3rem);
    /* Minimum: 1.5rem, Preferred: 4vw, Maximum: 3rem */
}

.responsive-text {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    line-height: 1.6;
}

/* Traditional responsive typography */
.heading {
    font-size: 1.5rem;
}

@media (min-width: 576px) {
    .heading {
        font-size: 2rem;
    }
}

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

@media (min-width: 1200px) {
    .heading {
        font-size: 3rem;
    }
}

Responsive Line Length

css

.readable-text {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .readable-text {
        max-width: 65ch; /* Optimal reading width */
        font-size: 18px;
        line-height: 1.7;
    }
}
Modern Responsive Techniques
Container Queries
css
/* Container queries for component-based responsive design */
.card-container {
    container-type: inline-size;
    container-name: card;
}

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

.card-title {
    font-size: 1rem;
}

@container card (min-width: 300px) {
    .card {
        padding: 1.5rem;
    }
    
    .card-title {
        font-size: 1.25rem;
    }
}

@container card (min-width: 500px) {
    .card {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 1rem;
        padding: 2rem;
    }
    
    .card-title {
        font-size: 1.5rem;
    }
}
CSS Grid Auto-Responsive
css
/* Responsive grid without media queries */
.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 1rem;
}

/* Responsive with different sizes */
.flexible-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    padding: clamp(1rem, 4vw, 3rem);
}
Intrinsic Web Design
css
/* Content-aware responsive design */
.intrinsic-layout {
    display: grid;
    grid-template-columns: fit-content(200px) minmax(0, 1fr) fit-content(150px);
    gap: 1rem;
}

.sidebar {
    /* Size based on content, max 200px */
}

.main {
    /* Takes remaining space */
    min-width: 0; /* Prevents overflow */
}

.aside {
    /* Size based on content, max 150px */
}
Responsive Images
Picture Element
html
<picture>
    <source media="(min-width: 1200px)" srcset="hero-large.jpg">
    <source media="(min-width: 768px)" srcset="hero-medium.jpg">
    <source media="(min-width: 576px)" srcset="hero-small.jpg">
    <img src="hero-mobile.jpg" alt="Hero image" loading="lazy">
</picture>
css
/* CSS for responsive images */
.responsive-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Art direction with CSS */
.hero-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

@media (min-width: 768px) {
    .hero-image {
        height: 400px;
        object-position: center top;
    }
}

@media (min-width: 1200px) {
    .hero-image {
        height: 600px;
    }
}
Srcset for Different Densities
html
<img src="image-1x.jpg" 
     srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x"
     alt="Responsive image">
css
/* CSS for high-DPI images */
.logo {
    width: 100px;
    height: 50px;
    background-image: url('logo-1x.png');
    background-size: contain;
    background-repeat: no-repeat;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .logo {
        background-image: url('logo-2x.png');
    }
}
Performance Considerations
Critical CSS
css
/* Above-the-fold critical styles */
.header {
    background-color: #333;
    color: white;
    padding: 1rem;
}

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

/* Non-critical styles loaded separately */
@media print {
    /* Print styles can be non-critical */
}

/* Complex animations can be non-critical */
@media (prefers-reduced-motion: no-preference) {
    .animation-heavy {
        /* Complex animations */
    }
}
Efficient Media Queries
css
/* Group related styles together */
.component {
    /* Base styles */
    padding: 1rem;
    background-color: white;
}

@media (min-width: 768px) {
    .component {
        /* All tablet styles together */
        padding: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .component-title {
        font-size: 1.25rem;
    }
    
    .component-text {
        line-height: 1.7;
    }
}
Testing Responsive Design
CSS for Testing
css
/* Debug helper for responsive testing */
.debug-responsive {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 12px;
    z-index: 9999;
}

.debug-responsive::before {
    content: "XS";
}

@media (min-width: 576px) {
    .debug-responsive::before {
        content: "SM";
    }
}

@media (min-width: 768px) {
    .debug-responsive::before {
        content: "MD";
    }
}

@media (min-width: 992px) {
    .debug-responsive::before {
        content: "LG";
    }
}

@media (min-width: 1200px) {
    .debug-responsive::before {
        content: "XL";
    }
}
Common Responsive Patterns
Holy Grail Responsive
css
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header,
.footer {
    background-color: #333;
    color: white;
    padding: 1rem;
    text-align: center;
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
    padding: 1rem;
    order: 1;
}

.sidebar {
    background-color: #f8f9fa;
    padding: 1rem;
    order: 2;
}

.aside {
    background-color: #e9ecef;
    padding: 1rem;
    order: 3;
}

@media (min-width: 768px) {
    .main {
        flex-direction: row;
    }
    
    .sidebar {
        flex: 0 0 200px;
        order: 0;
    }
    
    .content {
        order: 0;
        padding: 2rem;
    }
    
    .aside {
        flex: 0 0 200px;
        order: 0;
    }
}
Responsive Modal
css
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background-color: white;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 1rem 1rem 0 0;
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .modal {
        align-items: center;
    }
    
    .modal-content {
        width: 90%;
        max-width: 600px;
        max-height: 80vh;
        border-radius: 1rem;
    }
}
Accessibility in Responsive Design
css
/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-color: #ffffff;
        --border-color: #333333;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .button {
        border: 2px solid currentColor;
    }
}

/* Touch-friendly sizing */
@media (pointer: coarse) {
    .button {
        min-height: 44px;
        min-width: 44px;
    }
    
    .nav-item {
        padding: 1rem;
    }
}
Best Practices Summary
css
/* 1. Use relative units */
.responsive-component {
    padding: clamp(1rem, 4vw, 2rem);
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    gap: clamp(0.5rem, 2vw, 1rem);
}

/* 2. Avoid fixed heights */
.flexible-height {
    min-height: 200px; /* Instead of height: 200px */
}

/* 3. Use logical properties */
.logical-spacing {
    margin-inline: auto; /* Instead of margin-left/right */
    padding-block: 1rem; /* Instead of padding-top/bottom */
}

/* 4. Test with real content */
.real-content-test {
    /* Test with long titles, multiple lines, etc. */
}
Conclusion

Responsive design is essential for modern web development. Start with a mobile-first approach, use semantic breakpoints based on content rather than devices, and leverage modern techniques like CSS Grid, Flexbox, and container queries. Always consider performance, accessibility, and user preferences when implementing responsive designs.

Test your responsive designs on real devices and with real content to ensure they work well across all user scenarios. Remember that responsive design is not just about screen sizes - it's about creating flexible, adaptable experiences for all users.

LearnCodePro

CSS — Responsive Design & Media Queries

Introduction

Responsive Design Fundamentals

Mobile-First Approach

Viewport Meta Tag

Media Query Syntax and Types

Basic Media Query Structure

Media Types and Features

Breakpoint Strategies

Common Breakpoints

Content-Based Breakpoints

Responsive Layout Patterns

Navigation Patterns

Card Grid Responsive Pattern

Sidebar Responsive Pattern

Responsive Typography

Fluid Typography

Responsive Line Length

CSS — Box Model & Layout Fundamentals

CSS — Colors, Typography & Units (rem/em/vw)

CSS — Positioning (static, relative, absolute, fixed, sticky)

CSS — Flexbox: Layout Patterns & Common Recipes

CSS — Grid: Two-Dimensional Layouts & Templates

Quick Navigation

This Series

Topics in MERN STACK WEB DEVELOPMENT

Categories

Learn More

Want to Track Your Progress?

Introduction

Responsive Design Fundamentals

Mobile-First Approach

Viewport Meta Tag

Media Query Syntax and Types

Basic Media Query Structure

Media Types and Features

Breakpoint Strategies

Common Breakpoints

Content-Based Breakpoints

Responsive Layout Patterns

Navigation Patterns

Card Grid Responsive Pattern

Sidebar Responsive Pattern

Responsive Typography

Fluid Typography

Responsive Line Length

More in CSS

CSS — Box Model & Layout Fundamentals

CSS — Colors, Typography & Units (rem/em/vw)

CSS — Positioning (static, relative, absolute, fixed, sticky)

CSS — Flexbox: Layout Patterns & Common Recipes

CSS — Grid: Two-Dimensional Layouts & Templates

Quick Navigation

This Series

Topics in MERN STACK WEB DEVELOPMENT

Categories

Learn More

Want to Track Your Progress?