📲 Media Queries

Adaptive Styling

CSS Media Queries

Apply different styles based on device characteristics. Media queries are the foundation of responsive web design.

💻 Media Query Basics

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

/* Simple example */
@media screen and (max-width: 768px) {
    .container {
        padding: 10px;
    }
}

/* Multiple conditions */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .sidebar {
        width: 30%;
    }
}

🎯 Media Types

/* Media types */
@media all {
    /* All devices (default) */
}

@media screen {
    /* Computer screens, tablets, phones */
}

@media print {
    /* Printer output */
    .no-print {
        display: none;
    }
    
    body {
        color: black;
        background: white;
    }
}

@media speech {
    /* Screen readers */
}

/* Most common: screen (or omit for all) */
@media (min-width: 768px) {
    /* Same as screen */
}

📐 Width Media Features

/* min-width: Minimum width */
@media (min-width: 768px) {
    /* Applies when viewport is 768px or wider */
    .container {
        max-width: 1200px;
    }
}

/* max-width: Maximum width */
@media (max-width: 767px) {
    /* Applies when viewport is 767px or narrower */
    .menu {
        display: none;
    }
}

/* Exact width (rare) */
@media (width: 768px) {
    /* Only at exactly 768px */
}

/* Width range */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Between 768px and 1024px */
    .sidebar {
        width: 25%;
    }
}

/* Modern range syntax */
@media (768px <= width <= 1024px) {
    /* Same as above, cleaner syntax */
    .sidebar {
        width: 25%;
    }
}

📏 Height Media Features

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

/* max-height: Maximum height */
@media (max-height: 600px) {
    /* Short viewports (landscape phones) */
    .header {
        padding: 10px 0;
    }
}

/* Height range */
@media (min-height: 600px) and (max-height: 900px) {
    .content {
        padding: 50px 0;
    }
}

🔄 Orientation

/* Portrait: Height > Width */
@media (orientation: portrait) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Landscape: Width > Height */
@media (orientation: landscape) {
    .gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Combine with width */
@media (max-width: 768px) and (orientation: landscape) {
    /* Small landscape devices */
    .header {
        height: 50px;
    }
}

🖼️ Aspect Ratio

/* aspect-ratio: Width/Height ratio */
@media (aspect-ratio: 16/9) {
    /* 16:9 displays */
}

@media (min-aspect-ratio: 16/9) {
    /* 16:9 or wider */
    .video {
        max-width: 1200px;
    }
}

@media (max-aspect-ratio: 4/3) {
    /* 4:3 or narrower */
    .sidebar {
        width: 100%;
    }
}

🎨 Resolution & Display

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

@media (min-resolution: 192dpi) {
    /* 192 dots per inch */
    .icon {
        background-size: 50%;
    }
}

/* Alternative syntax */
@media (-webkit-min-device-pixel-ratio: 2) {
    /* Safari/Chrome older syntax */
}

/* Prefers color scheme */
@media (prefers-color-scheme: dark) {
    body {
        background: #1a1a1a;
        color: #ffffff;
    }
}

@media (prefers-color-scheme: light) {
    body {
        background: #ffffff;
        color: #000000;
    }
}

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

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

🖱️ Interaction Media Features

/* hover: Can user hover? */
@media (hover: hover) {
    /* Mouse/trackpad devices */
    .button:hover {
        background: #0056b3;
    }
}

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

/* pointer: Pointing device accuracy */
@media (pointer: fine) {
    /* Mouse, trackpad - precise */
    .small-button {
        min-width: 30px;
        min-height: 30px;
    }
}

@media (pointer: coarse) {
    /* Touch - less precise */
    .small-button {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (pointer: none) {
    /* No pointing device (keyboard only) */
    :focus {
        outline: 3px solid blue;
    }
}

🔗 Logical Operators

/* and: Both conditions must be true */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .container {
        padding: 30px;
    }
}

/* , (comma): OR - Any condition can be true */
@media (max-width: 768px), (orientation: portrait) {
    /* Mobile OR portrait */
    .menu {
        flex-direction: column;
    }
}

/* not: Negates entire query */
@media not screen and (color) {
    /* Not a color screen */
}

@media not (min-width: 768px) {
    /* Same as max-width: 767px */
    .mobile-menu {
        display: block;
    }
}

/* only: Prevents older browsers from applying */
@media only screen and (min-width: 768px) {
    /* Modern browsers only */
}

🎯 Common Breakpoints

/* Mobile-first breakpoints */

/* Extra small devices (phones) */
/* Base styles - no media query needed */
.container {
    padding: 15px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
        padding: 30px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* XXL devices (1400px and up) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

📱 Device-Specific Queries

/* iPhone (portrait) */
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 812px) 
    and (orientation: portrait) {
    /* iPhone styles */
}

/* iPad (portrait) */
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) {
    /* iPad portrait */
}

/* Retina displays */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    .logo {
        background-image: url('logo@2x.png');
        background-size: 100px 50px;
    }
}

/* Note: Better to use feature detection than device-specific queries */

🎯 Practical Examples

/* Responsive typography */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 18px;
    }
}

/* Responsive grid */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

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

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

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

/* Responsive navigation */
.nav {
    display: flex;
    flex-direction: column;
}

.nav-toggle {
    display: block;
}

.nav-menu {
    display: none;
}

.nav-menu.active {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .nav {
        flex-direction: row;
        justify-content: space-between;
    }
    
    .nav-toggle {
        display: none;
    }
    
    .nav-menu {
        display: flex;
        flex-direction: row;
        gap: 2rem;
    }
}

/* Dark mode support */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --border-color: #e0e0e0;
}

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

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

/* Print styles */
@media print {
    /* Hide navigation and non-essential content */
    nav, .sidebar, .ads, footer {
        display: none;
    }
    
    /* Optimize for print */
    body {
        font-size: 12pt;
        color: black;
        background: white;
    }
    
    a {
        color: black;
        text-decoration: underline;
    }
    
    /* Show URLs for links */
    a[href]::after {
        content: " (" attr(href) ")";
    }
    
    /* Page breaks */
    h2, h3 {
        page-break-after: avoid;
    }
    
    img {
        page-break-inside: avoid;
    }
}

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

/* Touch-friendly on coarse pointers */
@media (pointer: coarse) {
    button, a, input, select {
        min-height: 44px;
        min-width: 44px;
    }
    
    .button-group {
        gap: 12px;
    }
}

/* Hover effects only on hover-capable devices */
@media (hover: hover) {
    .card {
        transition: transform 0.3s;
    }
    
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }
}

/* Container queries (modern) */
@container (min-width: 400px) {
    .card {
        display: flex;
        flex-direction: row;
    }
}

/* Combine multiple features */
@media screen 
    and (min-width: 768px) 
    and (max-width: 1024px) 
    and (orientation: portrait) {
    /* Tablet portrait only */
    .sidebar {
        width: 35%;
    }
}

/* Between breakpoints */
@media (min-width: 768px) and (max-width: 991px) {
    /* Tablet only (not mobile or desktop) */
    .container {
        padding: 25px;
    }
}

💡 Best Practices

/* 1. Use mobile-first approach */
/* Base styles for mobile */
.element {
    font-size: 14px;
}

/* Enhance for larger screens */
@media (min-width: 768px) {
    .element {
        font-size: 16px;
    }
}

/* 2. Use em or rem for breakpoints */
/* More accessible, respects user font size */
@media (min-width: 48em) {  /* 768px at 16px base */
    .container {
        padding: 30px;
    }
}

/* 3. Group related queries */
/* Good */
@media (min-width: 768px) {
    .header { padding: 30px; }
    .nav { gap: 2rem; }
    .footer { padding: 50px; }
}

/* 4. Avoid device-specific queries */
/* Bad */
@media (device-width: 768px) { }

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

/* 5. Test on real devices */
/* Emulators don't catch everything */

/* 6. Use meaningful breakpoint names */
:root {
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}

🎯 Key Takeaways