A mobile-first layout starts with the smallest practical screen, keeps only essential content, and adds complexity as more space becomes available. Think of it like seasoning: begin with a simple dish, then add enhancements instead of trying to remove them later. section 13.15
Build the layout in small steps:
- Start with a minimal layout for a typical smartphone, often around 320 pixels wide—or use analytics to choose a more representative starting width. section 13.15
- Include only elements essential to the user’s experience, especially when users may have slow connections or limited data plans. section 13.15
- Add features, adjust sizes, and change the arrangement with media queries as the screen becomes wider. section 13.19
- Combine the approach with relative measurements, a flexible grid, and responsive layout techniques. section 13.18
A small-screen baseline
Set compact heading sizes first, then enlarge them at 750 pixels: h1 starts at 2rem and becomes 2.5rem; h2 starts at 1.5rem and becomes 2rem; h3 starts at 1.25rem and becomes 1.5rem. The larger-screen rules add enhancement without requiring a separate mobile layout. section 14.9
h1 {
font-size: 2rem; #1
}
h2 {
font-size: 1.5rem; #1
}
h3 {
font-size: 1.25rem; #1
}
@media (min-width: 750px) {
h1 {
font-size: 2.5rem; #2
}
h2 {
font-size: 2rem; #2
}
h3 {
font-size: 1.5rem; #2
}
}
Browse the complete CSS example showing mobile-first heading sizes and their larger-screen overrides. section 14.9
