Media Queries in CSS
From the CSS cheat sheet · Media Queries & Responsive · verified Jul 2026
Media Queries
Responsive breakpoints, user preferences, and container queries
css
/* Mobile-first breakpoints */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }
/* Dark mode */
@media (prefers-color-scheme: dark) { }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) { }💡 Mobile-first (min-width) is the standard — start small, add complexity for larger screens
⚡ Container queries let components respond to their container size, not the viewport
📌 Always respect prefers-reduced-motion — disable animations for users who need it
🟢 See the Screen Sizes & Responsive Breakpoints sheet for device dimensions and patterns
media-queriesresponsivecontainer-queries