Responsive Design & Media Queries

Responsive Design & Media Queries

Responsive design means your layout adapts to any screen size — phone, tablet, laptop, or TV. This lesson covers the complete toolkit: media queries, fluid typography, responsive images, and modern container queries.

The Viewport Meta Tag

Without this, mobile browsers zoom out to show the full desktop site:

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

Media Queries

/* Syntax: @media (condition) { styles } */

/* Common breakpoints */
/* Mobile-first: write base styles for mobile, override for larger screens */

/* Default: mobile styles */
.nav { flex-direction: column; }

/* Tablet (768px+) */
@media (min-width: 768px) {
    .nav { flex-direction: row; }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    .container { max-width: 1200px; }
}

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

/* Desktop-first: base styles for desktop, override for smaller */
.grid { grid-template-columns: repeat(4, 1fr); }

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

@media (max-width: 767px) {
    .grid { grid-template-columns: 1fr; }
}

Common Media Features

/* Screen width */
@media (min-width: 768px) { }
@media (max-width: 767px) { }
@media (768px <= width <= 1024px) { }  /* modern range syntax */

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

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

/* Device pixel ratio (high-DPI / Retina) */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    .logo { background-image: url("logo@2x.png"); }
}

/* Color scheme preference */
@media (prefers-color-scheme: dark) {
    :root {
        --background: #1a1a1a;
        --text: #f0f0f0;
    }
}

/* Motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print */
@media print {
    nav, footer, .no-print { display: none; }
    body { font-size: 12pt; }
}

Fluid Typography with clamp()

Instead of resizing fonts at breakpoints, use clamp() for smooth scaling:

/* clamp(minimum, preferred, maximum) */

h1 {
    /* 2rem minimum, scales with viewport, 4rem max */
    font-size: clamp(2rem, 5vw, 4rem);
}

h2 {
    font-size: clamp(1.5rem, 4vw, 3rem);
}

p {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
}

/* Container width */
.container {
    width: min(90%, 1200px);  /* 90% on small screens, max 1200px */
    margin: 0 auto;
}

/* Padding that scales */
.section {
    padding: clamp(2rem, 8vw, 6rem) clamp(1rem, 5vw, 3rem);
}

Responsive Grid Patterns

/* Auto-fit: as many columns as fit at minimum size */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Auto-fill: creates empty columns if space allows */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

Container Queries (Modern CSS)

Container queries are like media queries but based on the parent container's size, not the viewport. This makes components truly portable:

/* Define a container */
.card-wrapper {
    container-type: inline-size;
    container-name: card;
}

/* Style based on container width */
@container card (min-width: 400px) {
    .card {
        flex-direction: row;
    }
    .card-image {
        width: 40%;
    }
}

@container card (max-width: 399px) {
    .card {
        flex-direction: column;
    }
}

Practical Responsive Layout

/* Base (mobile) */
.page-layout {
    display: grid;
    grid-template-areas:
        "header"
        "main"
        "aside"
        "footer";
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
    .page-layout {
        grid-template-areas:
            "header header"
            "main   aside"
            "footer footer";
        grid-template-columns: 1fr 300px;
        padding: 1.5rem;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .page-layout {
        grid-template-areas:
            "header header  header"
            "aside  main    .     "
            "footer footer  footer";
        grid-template-columns: 220px 1fr 200px;
        padding: 2rem;
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* Assign to areas */
header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

Responsive Images

/* Never exceed their container */
img, video {
    max-width: 100%;
    height: auto;
}

/* Responsive hero image */
.hero {
    aspect-ratio: 16 / 9;  /* maintain proportion */
    background-image: url("hero-mobile.jpg");
    background-size: cover;
    background-position: center;
}

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

Next lesson: CSS Variables & Custom Properties — maintainable, dynamic styles.