Interview Question

What is desktop-first design?

Desktop-first begins wide and uses narrower-screen overrides.

💡 Concept ✅ Quick Revision 🎨 CSS

Answer

Desktop-first CSS starts with wide-screen styles and adapts them for narrower viewports. • max-width queries commonly remove or rearrange wide layouts. • The method can work, but large-screen assumptions may require more overrides. • Content must still remain usable at zoomed and narrow sizes.

💡 Simple Example

.layout { grid-template-columns: 18rem 1fr; } @media (width < 48rem) { .layout { grid-template-columns: 1fr; } }

⚡ Quick Revision

Desktop-first begins wide and uses narrower-screen overrides.