CSS Media Queries
One stylesheet, every screen. Media queries let CSS ask questions about the device — how wide? does it prefer dark? reduced motion? — and answer with different rules. This is the mechanism behind every responsive site.
1. The syntax and the strategy
/* base styles: mobile, single column */
.cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) {
.cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
.cards { grid-template-columns: repeat(3, 1fr); }
}Mobile-first means the base rules serve small screens and min-width queries layer enhancements upward — simpler overrides, lighter mobile CSS. Choose breakpoints where your content breaks, not at specific phone models.
2. Queries beyond width
@media (prefers-color-scheme: dark) {
:root { --paper: #141A21; --ink: #E8EDF2; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
@media print {
nav, footer { display: none; }
}Media queries also read user preferences (dark mode, reduced motion), output type (print), and orientation. This site honors prefers-reduced-motion in its shared stylesheet — respecting it is an accessibility baseline, not a nicety.
clamp() from the Sizing lesson and auto-fill grids from the Grid lesson adapt continuously between breakpoints.3. Try it yourself
Make the cards responsive mobile-first: 1 column by default, 2 columns from min-width: 500px. Drag the preview divider to cross the breakpoint.
4. Quiz — check your understanding
CSS Media Queries Quiz
4 questions · pass at 60%Q1. "Mobile-first" means…
Q2. @media (min-width: 768px) applies when the viewport is…
Q3. Which query detects a user's dark-mode preference?
Q4. Breakpoints are best chosen by…
Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.