A breakpoint is a browser width or height at which page styles change to improve the layout. A mobile-first page starts with styles for narrow screens, then uses media queries to add or override styles as more space becomes available. The HTML stays the same at every size. section 7.1 section 7.2.2
A title that changes at 560 px
Set the title to 1.5rem by default, then add `@media (min-width: 560px) { .title > h1 { font-size: 2.25rem; } }`. Below 560 px, the base size applies; at 560 px and above, the larger size takes over. A media query does not change the selector’s specificity. section 7.2
Choose breakpoints where the layout needs to change, not because every element needs a new rule.
- At 560 px, give the header and hero more room, replace the menu toggle with visible navigation, and increase spacing. section 7.2.2
- At 650 px, place the main content in three grid columns. Below that width, leave the items in normal document flow; the columns were too cramped at narrower widths. section 7.2.3
- Reuse a few breakpoints where useful, but allow an element to change at a different width. Reserve max-width queries for cases where complex mobile-only rules would be tedious to undo. section 7.2.2 section 7.2.3
Listing 7.11 Three-column layout inside a media query
@media (min-width: 650px) {
.main {
display: grid; #1
grid-template-columns: 1fr 1fr 1fr; #1
gap: 1.5em;
max-inline-size: 1400px; #2
margin-inline: auto; #2
}
}
The three-column listing keeps grid styles inside a 650 px min-width query, so the columns appear only when there is enough room. section 7.2.3
Breakpoints can use px or em. In a media query, em is based on the browser’s default font size, so it may respond to a user’s changed default; that behavior is not consistent across all browsers. Use px when that scaling is unnecessary, or em when it is desirable. section 7.2
