CSS Responsive Design & Media Queries

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

/* Mobile-first approach (recommended!) */
/* Base styles = mobile */
.container {
    padding: 16px;
    font-size: 16px;
}

/* Tablet (768px+) */
@media (min-width: 768px) {
    .container {
        padding: 24px;
        font-size: 18px;
    }
}

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

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
    body {
        background: #1a1a1a;
        color: #fff;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Print styles */
@media print {
    .sidebar, .navbar, .footer { display: none; }
    .main { width: 100%; }
}

/* Use relative units */
body { font-size: 16px; }              /* Base size */
h1 { font-size: 2rem; }               /* 32px (2 × 16px) */
h2 { font-size: 1.5rem; }             /* 24px */
.text { font-size: 1.125rem; }        /* 18px */

/* vw/vh — viewport width/height */
.hero { height: 100vh; }              /* Full viewport */
.title { font-size: 5vw; }            /* 5% of viewport width */

/* clamp() — responsive sizing without media queries! */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
/* Min 24px, preferred 4vw, max 48px */

.container {
    width: clamp(300px, 80%, 1200px);
    /* Min 300px, preferred 80%, max 1200px */
}

/* Sidebar layout — stack on mobile, side-by-side on desktop */
.layout {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .layout {
        flex-direction: row;
    }
    .sidebar { width: 250px; }
    .main { flex: 1; }
}

/* Card grid — 1 col mobile, 2 tablet, 3 desktop */
.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

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

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

/* Auto-responsive grid (no media queries needed!) */
.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

/* Container queries (modern CSS!) */
.card-container {
    container-type: inline-size;
}

@container (min-width: 400px) {
    .card {
        display: flex;
        gap: 16px;
    }
    .card img { width: 120px; }
}

<!-- Different images for different screen sizes -->
<img
    srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
    sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 33vw"
    src="medium.jpg"
    alt="Responsive image"
>

<!-- Art direction (different crops for different sizes) -->
<picture>
    <source media="(min-width: 1024px)" srcset="wide.jpg">
    <source media="(min-width: 600px)" srcset="medium.jpg">
    <img src="narrow.jpg" alt="Photo">
</picture>