Basic Syntax
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}Common Breakpoints
| Name | Width | Targets |
|---|---|---|
| Mobile | < 640px | Phones |
| Tablet | 641px – 1024px | Tablets, large phones |
| Desktop | > 1024px | Laptops, desktops |
Mobile-First Approach
Write base styles for mobile, then add min-width queries to enhance for larger screens:
/* Base: mobile (1 column) */
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* Tablet and up */
@media (min-width: 640px) {
.grid { grid-template-columns: 1fr 1fr; }
}
/* Desktop and up */
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}Other Media Features
@media (prefers-color-scheme: dark) { /* dark mode */ }
@media (prefers-reduced-motion: reduce) { /* less animation */ }
@media print { /* print styles */ }Design mobile-first — use
min-width queries to scale up, not max-width to scale down. It results in simpler, less overriding CSS.