Media Queries & Breakpoints
Media queries are the foundation of responsive design. They let you apply different CSS rules based on screen width, height, orientation, and other device features. Combined with well-chosen breakpoints, they make your site work on every device.
Media Query Syntax
- @media (min-width: 768px) { } - Applies styles when screen is 768px or WIDER (mobile-first approach)
- @media (max-width: 767px) { } - Applies styles when screen is 767px or NARROWER (desktop-first approach)
- Common breakpoints - 480px (small mobile), 640px (large mobile), 768px (tablet), 1024px (laptop), 1280px (desktop)
- Combining conditions - @media (min-width: 768px) and (max-width: 1023px) targets tablets only
- Orientation - @media (orientation: landscape) { } for landscape-specific styles
- prefers-color-scheme - @media (prefers-color-scheme: dark) { } for dark mode support
- prefers-reduced-motion - @media (prefers-reduced-motion: reduce) { } disables animations for accessibility
Media Queries Code
/* Mobile-first approach (recommended) */
/* Base styles: mobile (no media query needed) */
.container {
padding: 16px;
}
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* Tablet: 768px+ */
@media (min-width: 768px) {
.container { padding: 24px; }
.grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
/* Desktop: 1024px+ */
@media (min-width: 1024px) {
.container { max-width: 1200px; margin: 0 auto; padding: 32px; }
.grid { grid-template-columns: repeat(3, 1fr); }
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
body { background: #1a1a2e; color: #e0e0e0; }
}
/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}Tip
Add @media (prefers-color-scheme: dark) and @media (prefers-reduced-motion: reduce) to every project from day one. Dark mode support doubles your accessibility reach and reduces eye strain for nighttime users. Reduced motion support is essential for users with vestibular disorders.
Mobile-first: start with mobile styles, enhance with min-width queries
Common Mistake
Writing desktop-first CSS with max-width media queries leads to progressively larger override code. Each breakpoint must undo what the desktop styles set. Mobile-first (min-width) starts lean and ADDS complexity - far cleaner and more performant for mobile devices.
Practice Task
Convert a desktop-first stylesheet to mobile-first: (1) Remove all max-width queries, (2) Write base styles for mobile (single column, small fonts), (3) Add min-width: 768px for tablet layout and min-width: 1024px for desktop. Compare the total line count - mobile-first is usually shorter.
Quick Quiz
Key Takeaways
- Media queries are the foundation of responsive design.
- @media (min-width: 768px) { } - Applies styles when screen is 768px or WIDER (mobile-first approach)
- @media (max-width: 767px) { } - Applies styles when screen is 767px or NARROWER (desktop-first approach)
- Common breakpoints - 480px (small mobile), 640px (large mobile), 768px (tablet), 1024px (laptop), 1280px (desktop)