Interview Question

What is mobile-first design?

Mobile-first starts simple and enhances with min-width queries.

💡 Concept ✅ Quick Revision 🎨 CSS

Answer

Mobile-first CSS starts with styles for constrained viewports and adds enhancements for larger spaces. • Base rules work without a minimum-width query. • min-width media queries add layout complexity as room becomes available. • The approach does not mean ignoring desktop users.

💡 Simple Example

.nav { display: block; } @media (width >= 48rem) { .nav { display: flex; } }

⚡ Quick Revision

Mobile-first starts simple and enhances with min-width queries.