Media Queries — Complete Guide

In this tutorial, you will learn about Media Queries. We cover key concepts, practical examples, and best practices to help you master this topic.

Media queries in CSS apply styles conditionally based on device characteristics like viewport width, height, orientation, resolution, and user preferences, enabling responsive layouts.

What You'll Learn

• Media query syntax and logical operators
• Common media features: width, orientation, resolution, prefers-reduced-motion
• Mobile-first vs desktop-first media query strategies
• Combining media queries with CSS Grid and Flexbox
• Media query best practices

Why It Matters

• Media queries are the core mechanism for Responsive Design
• They enable different layouts, typography, and interactions per device
• They can respect user preferences like reduced motion
• Proper media query Strategy reduces CSS complexity

Real-World Use

• A 3-column grid becomes 1 column below 768px
• A sidebar disappears on mobile and becomes a top section
• Navigation changes from horizontal to hamburger menu
• Font sizes increase on larger screens

flowchart LR
  A[Media Query] --> B{min-width: 768px?}
  B -->|Yes| C[Tablet/Desktop Styles]
  B -->|No| D[Mobile Styles]
  D --> E{Sidebar?}
  E -->|min-width: 1024px| F[Show Sidebar]
  E -->|default| G[Hide Sidebar]

Media Query Syntax

A media query consists of a media type and one or more expressions that check for specific device characteristics.

@media media-type (media-feature: value) {
    /* CSS rules */
}

Media types: all (default), screen, print, speech. Media features: width, height, orientation, resolution, prefers-color-scheme, etc.

Logical Operators

• and — All conditions must be true
• , (comma) — Any condition can be true (OR)
• not — Negates the entire query
• only — Prevents older browsers from applying styles

Code Example: Basic Media Queries

/* Default styles (mobile-first) */
body {
    font-size: 16px;
    background: #f5f5f5;
    padding: 1rem;
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Tablet: 768px and up */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: 1fr 1fr;
    }
    body {
        padding: 2rem;
    }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
    .grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    body {
        max-width: 1200px;
        margin: 0 auto;
        padding: 3rem;
    }
}

/* Combined conditions */
@media (min-width: 768px) and (orientation: landscape) {
    .sidebar {
        width: 250px;
        float: left;
    }
}

/* OR condition */
@media (max-width: 480px), (orientation: portrait) {
    .hide-on-mobile {
        display: none;
    }
}

Expected output: The grid starts as single-column on mobile. At 768px, it becomes 2 columns. At 1024px, it becomes 3 columns with a centered container. The sidebar appears only on landscape tablets and above.

Code Example: Feature Queries

/* @supports: feature query (not a media query but related) */
@supports (display: grid) {
    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@supports not (display: grid) {
    .grid {
        display: flex;
        flex-wrap: wrap;
    }
    .grid-item {
        width: calc(33.33% - 1rem);
        margin: 0.5rem;
    }
}

/* Combined: media query + feature query */
@media (min-width: 768px) {
    @supports (display: grid) {
        .layout {
            display: grid;
            grid-template-columns: 1fr 3fr;
        }
    }
}

Expected output: Browsers that support CSS Grid use the grid layout. Browsers that do not support Grid fall back to Flexbox. The feature query ensures progressive enhancement.

Code Example: Preference Media Queries

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

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

/* High contrast mode (Windows) */
@media (forced-colors: active) {
    .button {
        border: 2px solid ButtonText;
    }
}

/* Print styles */
@media print {
    nav, .sidebar, .ads {
        display: none;
    }
    body {
        font-size: 12pt;
        color: black;
        background: white;
    }
    a::after {
        content: " (" attr(href) ")";
    }
}

Expected output: Users with dark mode enabled see a dark theme. Users with reduced motion preferences see no animations. The print styles hide navigation and show URLs after links.

Common Mistakes

1. Using max-width for mobile-first — Mobile-first uses min-width (base styles for mobile, add complexity for larger screens). max-width is desktop-first.
2. Too many or too few breakpoints — Start with 3 breakpoints (480px, 768px, 1024px) and add only when content demands it.
3. Device-specific breakpoints — Use content-based breakpoints, not specific device widths. Content should dictate when the layout breaks.
4. Not testing media queries — Media queries can conflict and override each other in unexpected ways. Test at every breakpoint.
5. Forgetting orientation — A tablet in landscape is wider than portrait. Test and support both orientations.
6. Using only all screens — media type should match. Use @media screen for screen styles, @media print for print styles.
7. Not organizing media queries — Keep media queries near the rules they modify or use a structured approach. Avoid scattered queries.

Practice Questions

1. What is the difference between min-width and max-width in media queries? min-width applies styles when the viewport is at least that width (mobile-first). max-width applies styles when the viewport is at most that width (desktop-first).
2. What preference media queries does CSS support? prefers-color-scheme (dark/light), prefers-reduced-motion (reduce/no-preference), prefers-contrast (high/low/no-preference), and forced-colors (active/none).
3. How do you combine multiple conditions in a media query? Use and, commas for OR, and not for negation. Example: @media (min-width: 768px) and (orientation: landscape).
4. What is the difference between a media query and a feature query (@supports)? Media queries check device/browser characteristics. Feature queries check if the browser supports a specific CSS property.
5. Challenge: Create a page with 5 distinct layout variations using media queries: mobile portrait (under 480px), mobile landscape (480-767px), tablet (768-1023px), desktop (1024-1279px), and large desktop (1280px+). Each breakpoint should change grid columns, font sizes, and navigation.

FAQ

Mini Project

Build a responsive article page that uses media queries extensively. The page must include: a header with navigation, an article with a featured image, a sidebar with related links, a comments section, and a footer. Implement breakpoints at 480px, 768px, and 1024px. At each breakpoint, change: the grid layout (1 column to 2 columns to 3 columns), the navigation (hamburger to horizontal), font sizes (fluid scaling), sidebar visibility, and image sizes. Also implement print styles and dark mode support.

What's Next

Continue with Lesson 4: Fluid Layouts to learn how to create layouts that flow naturally between breakpoints.