CSS Media Queries

CSS Media Queries: Responsive Breakpoints and User Preferences

CSS media queries apply styles conditionally based on viewport width, screen orientation, pointer precision, or user accessibility preferences like dark mode and reduced motion. Writing mobile-first media queries keeps stylesheets smaller, faster to parse, and cleanly structured.

Mobile-First Breakpoints with min-width

In a mobile-first workflow, your base CSS styles target narrow mobile screens directly (single column, readable padding). Then @media (min-width: ...) rules layer multi-column grids and wider spacing progressively as screens grow larger.

/* Base mobile-first styles */
.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
}

/* Tablet and up */
@media (min-width: 768px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Desktop and up */
@media (min-width: 1024px) {
    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1120px;
        margin-inline: auto;
    }
}

/* Respect user dark mode & motion preferences */
@media (prefers-color-scheme: dark) {
    body { background-color: #0f172a; color: #f8fafc; }
}

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

Beyond Screen Width: Modern Media Features

Modern CSS also checks @media (hover: hover) to apply hover-only zoom effects strictly on mouse devices rather than sticky touch taps, and @media print to strip navigation bars and sidebars when users print an article.

Common Mistakes to Avoid

• Forgetting meta name="viewport" inside HTML head: Without content="width=device-width, initial-scale=1.0", mobile browsers lie about screen width and trigger desktop media queries shrunk down to tiny text.
• Inventing breakpoints for specific phone models: Base breakpoints on where your layout starts looking cramped rather than chasing every annual smartphone pixel width.
• Mixing min-width and max-width randomly: Stick consistently to mobile-first min-width queries so overrides never conflict unexpectedly.

Frequently Asked Questions

What is the difference between @media (width >= 768px) and min-width: 768px?

They mean the exact same thing! Modern CSS Media Queries Level 4 supports range syntax like @media (width >= 768px), while min-width: 768px works in older browsers too.

What are CSS container queries (@container) compared to media queries?

Media queries respond to the entire browser viewport width, whereas @container rules let a reusable card adapt to the width of its own parent sidebar or column.