CSS RWD Media Queries

Media Query Features

@media (max-width: 768px)

@media (orientation: portrait)

@media (min-resolution: 2dppx)

@media (prefers-color-scheme: dark)

🔹 Common Breakpoints

Common responsive breakpoints correspond to typical device screen sizes, enabling targeted layout adjustments at key viewport widths. While there are no universal standards, widely adopted ranges include: mobile (up to 767px), tablet (768px–1023px), small desktop (1024px–1439px), and large desktop (1440px and above). Using a mobile‑first approach, you add min‑width media queries at these thresholds to enhance the design progressively. It’s also effective to set breakpoints based on content rather than devices—adjusting layout when elements become too crowded or too stretched. This ensures a fluid, content‑centric responsive experience.

/* Mobile First Approach */

/* Extra small devices (phones, 600px and down) */
@media (max-width: 600px) {
    .container {
        padding: 10px;
        font-size: 14px;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media (min-width: 600px) {
    .container {
        padding: 20px;
        font-size: 16px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
        margin: 0 auto;
    }
}

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

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

🔹 Advanced Media Queries

Advanced media queries leverage modern CSS features to create more intelligent, user‑centric responsive experiences. Beyond width and height, you can query device orientation, resolution (DPI), color scheme (light/dark mode), and even user preference settings like prefers‑reduced‑motion. For example, @media (prefers‑color‑scheme: dark) applies dark‑theme styles automatically. Combining multiple conditions with logical operators (and, not, only) allows precise targeting. These queries enhance accessibility, personalization, and overall usability, making websites more adaptive to both device capabilities and user needs.

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #ffffff;
    }
    
    .card {
        background-color: #2d2d2d;
        border: 1px solid #404040;
    }
}

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

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

/* Hover capability detection */
@media (hover: hover) {
    .button:hover {
        background-color: #0056b3;
        transform: translateY(-2px);
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none;
    }
    
    body {
        font-size: 12pt;
        color: black;
        background: white;
    }
}

🔹 Container Queries (Modern)

Container queries revolutionize responsive design by allowing components to adapt based on their own container’s size, not just the viewport. Using the @container rule, you can define styles that trigger when a parent element reaches specific dimensions. This enables truly modular, reusable components—like cards, sidebars, or galleries—that work correctly in any layout context. First, designate a containment context with container‑type and optionally container‑name. Then write queries such as @container (min‑width: 400px) { ... }. Container queries solve long‑standing challenges in component‑based design, offering greater flexibility and maintainability.

/* Container queries - component-based responsive design */
.card-container {
    container-type: inline-size;
    container-name: card;
}

/* Query the container, not the viewport */
@container card (min-width: 300px) {
    .card {
        display: flex;
        gap: 1rem;
    }
    
    .card-image {
        width: 100px;
        height: 100px;
    }
}

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

🔹 Media Query Best Practices

/* Good: Relative units */
@media (min-width: 48em) { /* 768px at 16px base */ }

/* Good: Logical ranges */
@media (min-width: 768px) and (max-width: 1023px) { }

/* Good: Feature detection */
@media (hover: hover) and (pointer: fine) { }