CSS Media Query Snippets

📖 Complete Guide Available: This post is part of our comprehensive CSS Layout and Responsive Design Guide which covers modern layout techniques, Flexbox, Grid, and responsive patterns.

Essential CSS media query snippets for responsive design. Use these breakpoints to make your website work across all devices.

#Mobile-First Breakpoints

Start with mobile styles as your base, then enhance for larger screens:

/* Mobile styles (default) */
.container {
    padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        padding: 2rem;
    }
}

/* Desktop and up */
@media (min-width: 1024px) {
    .container {
        padding: 3rem;
    }
}

#Common Breakpoint Values

/* Small devices (phones) */
@media (min-width: 576px) {
}

/* Medium devices (tablets) */
@media (min-width: 768px) {
}

/* Large devices (desktops) */
@media (min-width: 992px) {
}

/* Extra large devices */
@media (min-width: 1200px) {
}

#Advanced Media Query Techniques

#High-DPI Displays

Target high-resolution screens for crisp images:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        background-image: url("[email protected]");
        background-size: 100px 50px;
    }
}

#Dark Mode Support

Respect user's system preferences:

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

#Reduced Motion

Respect accessibility preferences:

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

#Orientation Targeting

/* Landscape orientation */
@media (orientation: landscape) {
    .hero {
        height: 60vh;
    }
}

/* Portrait orientation */
@media (orientation: portrait) {
    .hero {
        height: 80vh;
    }
}

#Container Queries (Modern Alternative)

For modern browsers, consider container queries:

@container (min-width: 400px) {
    .card {
        display: flex;
        flex-direction: row;
    }
}

#Best Practices

1. Mobile-first approach: Start with mobile styles and enhance upward
2. Content-based breakpoints: Choose breakpoints based on content needs, not device sizes
3. Test across devices: Always test on real devices, not just browser dev tools
4. Performance: Minimize CSS delivery with critical CSS techniques

#Related CSS Techniques

These breakpoints work for any device size. Focus on when your content needs to adapt, not specific device dimensions.

Combine media queries with other responsive techniques:

• Complete CSS Layout Guide for comprehensive responsive design
• Responsive table design for data presentation
• Equal height columns for consistent layouts
• CSS centering techniques for alignment
• Disable text highlighting for better UX