Media Queries
Media queries apply CSS rules only when specific conditions are met, such as a minimum or maximum viewport width.
They are the core tool for adapting layouts to different screen sizes.
HTML
Intermediate
5 min read
CSS Media Queries
Example
/* Mobile base (default) */
.nav { display: none; }
/* Tablet and up */
@media (min-width: 768px) {
.nav { display: flex; }
.hero { font-size: 2rem; }
}
/* Desktop */
@media (min-width: 1200px) {
.hero { font-size: 3rem; }
} Pro Tip
Use min-width (mobile-first) media queries — they result in cleaner, more performant CSS.