CSS Media Queries Responsive Breakpoints

Media queries let CSS respond to the browsing environment. They can check width, height, orientation, print mode, hover support, pointer precision, dark mode, reduced motion, contrast preferences, and more.

The best responsive CSS uses media queries only when the design actually needs a change. Fluid units, flexbox, grid, min(), max(), and clamp() can handle many adjustments before a breakpoint is necessary.

What are Media Queries?

Media queries are a CSS feature that allows you to apply styles conditionally based on device characteristics like screen width, height, orientation, resolution, and user preferences. They are the foundation of responsive web design, enabling websites to adapt their layout and appearance across different devices from mobile phones to large desktop monitors.

Introduced in CSS3, media queries use the @media rule to test one or more conditions. If the conditions are met, the CSS rules inside the media query are applied. This allows developers to create fluid, adaptive designs that provide optimal viewing experiences on any device without requiring separate mobile and desktop versions.

Media Types

Media types specify the category of device for which styles should be applied. While CSS2 defined many media types, most are now deprecated. Modern CSS focuses on four main types:

The screen type is most commonly used and is often omitted since it's the default for most media queries. The print type is valuable for creating printer-friendly versions of web pages by hiding navigation, sidebars, and ads.

Type	Description	Use Case
all	Default - applies to all devices	General styles that work everywhere
screen	Computer screens, tablets, smartphones	Most common - digital displays
print	Print preview mode and printed pages	Printer-friendly versions
speech	Screen readers and speech synthesizers	Accessibility for visually impaired users

Media Query Syntax

Media queries use a specific syntax that combines media types with media features. The basic structure is @media [type] [logical operator] (feature) { CSS rules }. You can combine multiple conditions using logical operators like and, not, and only.

Media Query Syntax Examples

/* Basic syntax */
@media screen and (max-width: 768px) {
    /* Styles for screens up to 768px wide */
}

/* Multiple conditions with AND */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* Styles for screens between 768px and 1024px */
}

/* OR operator using comma */
@media (max-width: 768px), (orientation: portrait) {
    /* Styles for small screens OR portrait orientation */
}

/* NOT operator */
@media not print {
    /* Styles for everything except print */
}

/* ONLY operator (legacy browser support) */
@media only screen and (min-width: 768px) {
    /* Only applies to screens, ignored by old browsers */
}

Common Media Features

Media features are the conditions you test in media queries. They describe specific characteristics of the device or browser. Here are the most commonly used features:

width - Exact viewport width
min-width - Minimum viewport width (mobile-first approach)
max-width - Maximum viewport width (desktop-first approach)
height - Exact viewport height
min-height - Minimum viewport height
max-height - Maximum viewport height
orientation - portrait or landscape
aspect-ratio - Width-to-height ratio (e.g., 16/9)
resolution - Screen resolution in dpi or dppx
hover - Whether device supports hover (hover or none)
pointer - Pointing device accuracy (fine, coarse, none)
prefers-color-scheme - light or dark mode preference
prefers-reduced-motion - reduce or no-preference
prefers-contrast - high, low, or no-preference
prefers-reduced-transparency - Transparency preference

Responsive Breakpoints

Breakpoints are specific screen widths where your design changes to accommodate different devices. While there's no universal standard, these breakpoints are widely used and based on common device sizes:

Standard Responsive Breakpoints

/* Mobile-First Approach (Recommended) */
/* Start with mobile styles, then add larger screens */

/* Extra Small devices (phones, less than 576px) */
/* No media query needed - this is the base */
body {
    font-size: 14px;
    padding: 10px;
}

.container {
    width: 100%;
    padding: 0 15px;
}

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

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    body {
        font-size: 15px;
    }

    .container {
        max-width: 540px;
        margin: 0 auto;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    body {
        font-size: 16px;
        padding: 20px;
    }

    .container {
        max-width: 720px;
    }

    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .sidebar {
        display: block; /* Show sidebar on tablets */
    }
}

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

    .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .nav {
        display: flex; /* Horizontal navigation */
    }
}

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

    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

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

Orientation Queries

Orientation media queries detect whether a device is in portrait (height > width) or landscape (width > height) mode. This is particularly useful for tablets and phones that can be rotated.

Orientation Media Queries

/* Portrait orientation (height > width) */
@media (orientation: portrait) {
    .hero {
        height: 80vh;
        flex-direction: column;
    }

    .image-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .video-player {
        aspect-ratio: 9/16; /* Vertical video */
    }
}

/* Landscape orientation (width > height) */
@media (orientation: landscape) {
    .hero {
        height: 60vh;
        flex-direction: row;
    }

    .image-gallery {
        grid-template-columns: repeat(4, 1fr);
    }

    .video-player {
        aspect-ratio: 16/9; /* Horizontal video */
    }
}

/* Combine with width for precise control */
@media (max-width: 768px) and (orientation: landscape) {
    /* Small screens in landscape - like phones rotated */
    .navbar {
        height: 50px; /* Shorter navbar to save space */
    }

    .content {
        padding: 10px; /* Less padding */
    }
}

Dark Mode Support

The prefers-color-scheme media feature detects if the user has requested a light or dark color theme at the operating system level. Supporting dark mode improves user experience and reduces eye strain in low-light environments.

Dark Mode Implementation

/* Define CSS variables for theming */
:root {
    /* Light mode (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
    --link-color: #0d6efd;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1a1a2e;
        --bg-secondary: #16213e;
        --text-primary: #eee;
        --text-secondary: #adb5bd;
        --border-color: #495057;
        --link-color: #6ea8fe;
    }

    /* Adjust images for dark mode */
    img {
        opacity: 0.9;
        filter: brightness(0.9);
    }

    /* Invert icons if needed */
    .icon {
        filter: invert(1);
    }
}

/* Apply variables */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.card {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

a {
    color: var(--link-color);
}

Accessibility: Reduced Motion

The prefers-reduced-motion media feature detects if users have requested minimal animation. This is crucial for accessibility, as some users experience motion sickness or vestibular disorders triggered by animations.

Respecting Reduced Motion Preference

/* Default: animations enabled */
.button {
    transition: all 0.3s ease;
}

.modal {
    animation: slideIn 0.5s ease-out;
}

.loader {
    animation: spin 1s linear infinite;
}

/* Respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
    /* Disable or minimize all animations */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Keep essential animations but make them instant */
    .button {
        transition: none;
    }

    .modal {
        animation: none;
    }

    /* Disable infinite animations completely */
    .loader {
        animation: none;
        /* Show static loading indicator instead */
        opacity: 0.7;
    }
}

@keyframes slideIn {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

Print Styles

Print media queries create printer-friendly versions of web pages. They typically hide navigation, sidebars, and ads while optimizing typography and layout for paper.

Print-Friendly Styles

@media print {
    /* Hide non-essential elements */
    .navbar,
    .sidebar,
    .footer,
    .ads,
    .social-share,
    .comments,
    button,
    video {
        display: none !important;
    }

    /* Reset page styles */
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: black;
        background: white;
        margin: 0;
        padding: 0;
    }

    /* Optimize typography */
    h1 { font-size: 24pt; }
    h2 { font-size: 18pt; }
    h3 { font-size: 14pt; }

    /* Show link URLs */
    a::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }

    /* Prevent page breaks inside elements */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    img, table, pre, blockquote {
        page-break-inside: avoid;
    }

    /* Ensure images fit on page */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Add page breaks where needed */
    .page-break {
        page-break-before: always;
    }

    /* Expand collapsed content */
    details {
        display: block;
    }

    details summary {
        display: none;
    }

    details[open] {
        display: block;
    }
}

Hover and Pointer Queries

The hover and pointer media features detect input capabilities. This helps differentiate between touch devices (phones, tablets) and devices with precise pointing devices (mouse, trackpad).

Touch vs Mouse Detection

/* Devices that support hover (mouse, trackpad) */
@media (hover: hover) and (pointer: fine) {
    .button:hover {
        background-color: #2980b9;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    .tooltip {
        display: none;
    }

    .card:hover .tooltip {
        display: block;
    }

    /* Subtle hover effects */
    .link:hover {
        text-decoration: underline;
    }
}

/* Touch devices (no hover capability) */
@media (hover: none) and (pointer: coarse) {
    /* Use :active instead of :hover */
    .button:active {
        background-color: #2980b9;
    }

    /* Make touch targets larger (minimum 44x44px) */
    .button,
    .link {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
    }

    /* Show tooltips by default or on tap */
    .tooltip {
        display: block;
        position: static;
    }

    /* Remove hover-dependent features */
    .dropdown:hover .dropdown-menu {
        display: none; /* Don't rely on hover */
    }
}

/* Coarse pointer (touch, stylus) */
@media (pointer: coarse) {
    /* Increase spacing for easier tapping */
    .nav-item {
        margin: 8px 0;
    }

    input,
    select,
    textarea {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}

/* Fine pointer (mouse, trackpad) */
@media (pointer: fine) {
    /* Smaller, more precise controls */
    .close-button {
        width: 20px;
        height: 20px;
    }
}

Resolution and Pixel Density

High-resolution displays (Retina, 4K) require higher quality images. The resolution media feature detects pixel density to serve appropriate image assets.

High-DPI Display Support

/* Standard resolution (1x) */
.logo {
    background-image: url('logo.png');
    width: 200px;
    height: 50px;
}

/* High resolution (2x) - Retina displays */
@media (min-resolution: 192dpi),
       (min-resolution: 2dppx) {
    .logo {
        background-image: url('logo@2x.png');
        background-size: 200px 50px;
    }
}

/* Extra high resolution (3x) - newer phones */
@media (min-resolution: 288dpi),
       (min-resolution: 3dppx) {
    .logo {
        background-image: url('logo@3x.png');
        background-size: 200px 50px;
    }
}

/* Alternative: use image-set() */
.hero {
    background-image: image-set(
        url('hero.jpg') 1x,
        url('hero@2x.jpg') 2x,
        url('hero@3x.jpg') 3x
    );
}

Best Practices

Use mobile-first approach - Start with mobile styles, then add min-width queries for larger screens
Keep breakpoints simple - Use 3-5 breakpoints maximum; more creates maintenance issues
Test on real devices - Browser DevTools are helpful but not perfect; test on actual phones and tablets
Use relative units - Prefer em or rem over px in media queries for better accessibility
Group related queries - Keep media queries near the components they affect for easier maintenance
Respect user preferences - Always implement prefers-reduced-motion and prefers-color-scheme
Optimize for touch - Use hover: none to detect touch devices and adjust interactions
Consider print styles - Add @media print for better printing experience
Avoid device-specific queries - Don't target specific devices; focus on screen sizes and capabilities
Test performance - Too many media queries can impact performance; consolidate when possible

Common Mistakes to Avoid

❌ Using max-width for mobile-first (use min-width instead)
❌ Targeting specific devices like "iPhone 12" (screen sizes change constantly)
❌ Forgetting to include viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">
❌ Using too many breakpoints (keep it simple with 3-5 max)
❌ Not testing on real devices (emulators aren't perfect)
❌ Ignoring accessibility features like prefers-reduced-motion
❌ Using pixel-perfect breakpoints (e.g., 767px instead of 768px)
❌ Duplicating styles across multiple queries (use CSS variables)
❌ Not considering landscape orientation on mobile devices
❌ Forgetting print styles for content-heavy pages

Key Takeaways

Use mobile-first min-width queries when building from small screens upward.
Use max-width queries when you intentionally start from a desktop layout.
Choose breakpoints based on content needs, not only device names.
Use hover and pointer queries for behavior that differs between mouse and touch devices.
Add print and reduced-motion queries where the page experience benefits from them.

Common Mistakes to Avoid

WRONG Adding a breakpoint for every popular device width.

RIGHT Add breakpoints where the content or layout starts to fail.

Content-based breakpoints survive new device sizes better.

WRONG Depending on hover menus for touch devices.

RIGHT Use hover and pointer media features or JavaScript state for touch-friendly menus.

Many touch users cannot use hover interactions reliably.

WRONG Writing media queries with high-specificity overrides everywhere.

RIGHT Keep base selectors simple so responsive overrides stay simple too.

Responsive CSS becomes painful when every override fights specificity.

Practice Tasks

Create a mobile-first layout that changes from one column to two columns at the content breakpoint.
Add print styles that hide navigation and improve article readability.
Use prefers-color-scheme to adjust a page for dark mode.
Use hover and pointer queries to disable hover-only tooltips on touch devices.

Frequently Asked Questions

Should I use min-width or max-width?

Use min-width for mobile-first CSS and max-width for desktop-first CSS. Mobile-first is usually easier for modern responsive pages.

Are media queries only for screen width?

No. They can also check orientation, height, pointer type, hover ability, print mode, motion preference, color scheme, and more.

How many breakpoints should a page have?

As few as the content needs. Add a breakpoint when the design becomes hard to read or use.

Can media queries replace responsive layout tools?

No. They work best with fluid units, grid, flexbox, and intrinsic sizing.

Previous Next

CSS Media Queries Responsive Breakpoints