Media queries are how one stylesheet adapts to many screens.
Direct answer
A media query applies CSS only when a condition is true, such as a minimum screen width. Write base styles for small screens, then add @media (min-width: ...) blocks for larger ones. You can also query orientation, colour scheme and reduced motion.
Mobile-first example
.layout {
display: grid;
gap: 16px;
}
@media (min-width: 768px) {
.layout {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1100px) {
.layout {
grid-template-columns: repeat(3, 1fr);
}
}
Other useful queries
@media (prefers-color-scheme: dark) { body { background: #111; color: #eee; } }
@media (prefers-reduced-motion: reduce) { * { animation: none; } }
@media (orientation: landscape) { .hero { min-height: 60vh; } }
@media print { nav { display: none; } }
Tips
- Choose breakpoints where your design breaks, not for specific devices.
- Keep queries near the components they change.
Where Teyro fits
Teyro's Responsive Web Design with CSS course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
Start small, add queries as the layout needs space. See breakpoints.
