A mobile-first layout starts with a usable small-screen page, then adds styles for wider viewports. The same HTML and CSS serve every device. This avoids maintaining separate mobile and desktop sites—and avoids trying to squeeze a finished desktop design onto a phone. section 7.0 section 7.1
Build from the smallest layout outward:
- Put the most important content first in the HTML. A narrow screen has little room for secondary content, and this order also helps screen-reader users reach the main content. section 7.1
- Write mobile styles outside media queries so they apply at every width. Add min-width queries when more space makes a useful change possible. section 7.2.2
- Enhance only what needs changing. At a medium breakpoint, for example, increase spacing, replace a toggle button with a visible navigation menu, and give the main content columns. section 7.2.2
Cards that expand into a grid
On small screens, cards stack as ordinary block elements, fill the available width, and retain side margins. At `min-width: 30em`, the container gains `display: grid` and `grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))`. The wider layout adds columns without replacing the mobile presentation. section 17.2.1
Listing 7.8 General structure of responsive CSS
.title { #1
...
}
@media (min-width: 35em) { #2
.title {
...
}
}
@media (min-width: 50em) { #3
.title {
...
}
}
The listing shows the basic CSS order: a default rule followed by medium- and large-screen min-width queries. section 7.2.2
A design may need one breakpoint or several; an element need not change at every breakpoint. A max-width query can contain unusually complex mobile-only rules, but routinely using them to undo desktop styles works against the mobile-first approach. section 7.2.2
