A media query applies a block of CSS only when a condition is true — most commonly, the width of the browser window. This is the core mechanism behind a site that looks right on both a phone and a desktop.
@media (max-width: 768px) {
.sidebar {
display: none;
}
}| Query | Applies when... |
|---|---|
| (max-width: 768px) | The viewport is 768px wide or narrower |
| (min-width: 768px) | The viewport is 768px wide or wider |
Writing the base styles for small screens first, then adding min-width queries to enhance the layout for larger screens, is the modern recommended approach — it means a phone never downloads styles meant to be overridden.
.container {
display: block; /* base: stacked, for mobile */
}
@media (min-width: 768px) {
.container {
display: flex; /* enhanced: side by side, for tablet and up */
}
}| Breakpoint | Roughly targets |
|---|---|
| 480px | Small phones |
| 768px | Tablets |
| 1024px | Small laptops |
| 1280px+ | Desktops |
@media (orientation: landscape) { /* wider than tall */ }
@media (prefers-color-scheme: dark) { /* user has dark mode on */ }
@media (prefers-reduced-motion: reduce) { /* user asked for less motion */ }@media (min-width: 768px) and (orientation: landscape) {
.layout { grid-template-columns: 1fr 1fr; }
}The tag every responsive page needs
Don't forget the viewport meta tag in the page's <head> — without <meta name="viewport" content="width=device-width, initial-scale=1">, mobile browsers render at a fake desktop width and media queries never trigger as expected.