Responsive Design and Media Queries
Building layouts that adapt to different screen sizes using the viewport meta tag and @media rules.
阅读需 2 分钟
Responsive design means a page adapts to whatever screen it's viewed on — a phone, a tablet, a widescreen monitor — rather than assuming one fixed width. CSS's main tool for this is the media query.
The viewport meta tag comes first
<meta name="viewport" content="width=device-width, initial-scale=1" />Without this tag in <head>, mobile browsers render the page at a desktop-like width (often 980px) and zoom it out to fit, which defeats any responsive CSS you write. This single line tells the browser to use the device's actual width as the layout width — it's a prerequisite for responsive design to work at all, not an optional extra.
Mobile-first vs. desktop-first
/* Mobile-first: base styles are for small screens */
.gallery {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.gallery {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.gallery {
grid-template-columns: 1fr 1fr 1fr;
}
}A @media rule wraps declarations that only apply when its condition is true. (min-width: 768px) matches viewports 768px and wider. Writing base styles for the smallest screen first, then layering on min-width queries for larger screens, is called mobile-first — it tends to produce simpler CSS than starting from a desktop layout and fighting it back down to mobile with max-width overrides.
Common breakpoints are a starting point, not a rule
@media (max-width: 640px) { /* small phones */ }
@media (max-width: 768px) { /* phones/small tablets */ }
@media (max-width: 1024px) { /* tablets */ }There's no universally "correct" set of breakpoints — the right ones are wherever your specific design starts to look cramped or awkwardly spaced, which you find by actually resizing the browser rather than copying numbers from a framework. Don't design for named devices; design for ranges of width.
Media features beyond width
@media (prefers-color-scheme: dark) {
body {
background: #0f172a;
color: #e2e8f0;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}Media queries aren't limited to screen size. prefers-color-scheme detects the user's OS-level light/dark mode preference, and prefers-reduced-motion detects a user who's asked their system to minimize animation — often for vestibular disorders. Respecting the latter is a real accessibility consideration, not a nice-to-have.
Responsive without any media query
Not every responsive behavior needs @media — grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) (from the Grid lesson) and clamp() for fluid font sizes (from the units lesson) both adapt continuously to the container's size. Reach for media queries when the layout needs to change shape at a threshold — like switching from a stacked mobile nav to a horizontal desktop one — and reach for fluid techniques when it just needs to scale.