A media query makes CSS conditional. An `@media` rule applies its enclosed styles only when its condition matches, such as a viewport at least 560px wide. Below that width, the enclosed rules are ignored. Matching rules still participate in the normal cascade: the query does not increase their selectors’ specificity. section 7.2
Build upward from a narrow layout
Start with styles that work on small viewports, then add changes when the layout has room: `.title > h1 { font-size: 1.5rem; } @media (min-width: 560px) { .title > h1 { font-size: 2.25rem; } } @media (min-width: 650px) { .main { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5em; } }` The heading grows at 560px. The content remains stacked in normal flow until 650px, when three columns have enough space. Breakpoints need not be identical across the page: choose them where a particular arrangement begins to feel cramped. section 7.2 section 7.2.3
Keep the conditions purposeful:
- For mobile-first CSS, leave the small-screen rules outside queries and usually layer larger-screen changes with `min-width`. A `max-width` query can contain unusually complex small-only rules, but need not become the default. section 7.2.2
- Use other features when width is not the relevant constraint: orientation, resolution, pointer precision, color-scheme preference, and print are among the available targets. Combine required conditions with `and`, or alternatives with a comma. section 7.2.1
- Widths may use `px` or `em`. An `em` in a media query follows the browser’s default font size, not a font size set on the page; behavior around changed defaults is not consistent across all browsers. section 7.2
Listing 7.10 Restructuring the nav menu for a medium breakpoint
@media (min-width: 560px) {
.menu-toggle {
display: none; #1
}
.menu-dropdown {
display: block; #1
position: static; #2
}
}
@media (min-width: 560px) {
.nav-menu {
display: flex; #3
border: 0;
padding-inline: 1em;
}
.nav-menu > li {
flex: 1; #3
}
.nav-menu > li + li {
border: 0;
}
.nav-menu > li > a {
padding: 0.3em;
text-align: center;
}
}
At a medium breakpoint, the navigation rules hide the menu button, reveal the menu, and arrange its links in a flex row. The listing shows why a responsive change may require several coordinated declarations rather than a single width adjustment. section 7.2.2
Queries can also change a shared value instead of restyling every component. Increasing the root font size at larger widths scales a panel’s relative-unit text, padding, and border radius together—provided those dimensions use relative units rather than fixed pixels. Keep layouts fluid between breakpoints rather than fixing container widths at each one. section 2.3.2 section 7.3.1
