What does mobile-first responsive development mean in practice?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
Write base styles for small screens, then layer enhancements with min-width media queries as space grows. It forces content prioritization and produces cleaner cascades than desktop-first max-width overrides.
Detailed explanation
Mobile-first is an authoring order, not just breakpoints. Base CSS targets the constraint environment — single column, touch targets ≥44px, essential content only — then min-width queries progressively add columns, larger type, hover states as real estate allows. Benefits compound: the cascade adds rather than undoes (desktop-first buries you in overrides), performance improves because mobile avoids downloading/hiding desktop cruft, and forced prioritization clarifies what actually matters. Breakpoint selection follows content, not devices: add one where the design breaks (~480px, ~768px, ~1024px typical), letting container queries handle component-level adaptation independent of viewport — the modern evolution for reusable components. Pair with fluid techniques so fewer breakpoints are needed: fluid type via clamp(), percentage/fr/grid auto-fit layouts, rem-based spacing scaling. Test across real device classes and throttled networks.
Example
/* Mobile base */
.features { display: grid; gap: 1rem; }
/* Tablet: two columns */
@media (min-width: 48rem) {
.features { grid-template-columns: repeat(2, 1fr); }
}
/* Desktop: three + wider gutters */
@media (min-width: 64rem) {
.features { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}Interview tip
Stress 'additive cascade' and content-driven breakpoints, then mention container queries + clamp() reducing breakpoint count — current best practice vocabulary.
Common mistakes
- Writing desktop styles then patching with max-width queries.
- Picking breakpoints per-device instead of per-design-breakage.