CSS Media Query Recipes (Retina, DPI, Color Depth, Aspect Ratio)

/* Base styles target the smallest screens (phones in portrait). */
.container {
    padding: 1rem;
    max-width: 100%;
}

/* Tablet and up: 640px is a common min-width breakpoint for two-column layouts. */
@media (min-width: 640px) {
    .container {
        padding: 1.5rem;
        max-width: 600px;
        margin-inline: auto;
    }
}

/* Small laptop and up: bump to wider container, tighter line-height. */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }
    body {
        line-height: 1.6;
    }
}

/* Large desktop. */
@media (min-width: 1440px) {
    .container {
        max-width: 1200px;
    }
}

/* Avoid mixing min-width and max-width in the same stylesheet; pick one
   direction (mobile-first = min-width is the modern default) and stick to it. */

/* Default: ship a 1x background image. */
.logo {
    background-image: url('logo.png');
    background-size: 100px 40px;
}

/* Modern, vendor-neutral: min-resolution in dppx. 2dppx covers most retina-class
   displays (iPhone, modern Macs, high-DPI Android phones). */
@media (min-resolution: 2dppx) {
    .logo {
        background-image: url('[email protected]');
    }
}

/* Print-quality 300 DPI: useful for icons rendered for print stylesheets. */
@media (min-resolution: 300dpi) {
    .badge {
        background-image: url('badge-print.png');
    }
}

/* Legacy WebKit fallback. Keep only if you must support Safari < 16 / very old
   iOS. Modern Safari handles min-resolution: 2dppx, so this block is optional. */
@media (-webkit-min-device-pixel-ratio: 2) {
    .logo {
        background-image: url('[email protected]');
    }
}

/* For most teams, a single 2dppx query plus a 1x default is enough; do not
   ship 3x assets unless you have measured the bandwidth cost. */

/* color-gamut targets wider color spaces for displays that support them. */
@media (color-gamut: p3) {
    .accent {
        /* Display-P3 covers ~25% more colors than sRGB. Modern Safari, Chrome
           on macOS, and recent iPhones support it. */
        color: color(display-p3 1 0 0.4);
    }
}

/* color: N gates by bits-per-component. (color: 8) means at least 8 bits per
   channel, i.e. true-color. Rarely needed today; almost every consumer device
   meets the minimum. Listed here for completeness. */
@media (color: 8) {
    .photo {
        filter: contrast(1.05);
    }
}

/* User preference: dark mode follows the OS-level setting. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #111;
        --fg: #eee;
    }
}
@media (prefers-color-scheme: light) {
    :root {
        --bg: #fff;
        --fg: #111;
    }
}

/* User preference: reduced motion. Always provide a no-animation fallback. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* Other handy preferences:
   - prefers-contrast: more / less / no-preference
   - prefers-reduced-data: reduce  (save data on metered connections)
   - forced-colors: active        (Windows High Contrast mode) */

/* Match a specific aspect ratio (16:9 widescreen video, 4:3 classic, 1:1 square). */
@media (aspect-ratio: 16/9) {
    .player {
        max-height: 100vh;
    }
}

/* Range queries: at least square, at most ultrawide. */
@media (min-aspect-ratio: 1/1) {
    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-aspect-ratio: 21/9) {
    .gallery {
        gap: 1rem;
    }
}

/* Orientation: landscape vs portrait. Useful for mobile games and media apps. */
@media (orientation: landscape) {
    .stage {
        flex-direction: row;
    }
}
@media (orientation: portrait) {
    .stage {
        flex-direction: column;
    }
}

/* Combine queries with `and`. Logical OR uses a comma-separated list. */
@media (orientation: landscape) and (min-width: 768px) {
    .toolbar {
        position: fixed;
        right: 1rem;
        top: 50%;
    }
}

@media (max-width: 480px), (orientation: portrait) {
    /* Either condition triggers this block. */
    .sidebar {
        display: none;
    }
}