HTML & CSS Interview Question #104

What is mobile-first CSS?

Responsive Design, Modern CSS, Variables, Transitions & Animations Senior Advanced

Quick Interview Answer

Mobile-first CSS starts with styles appropriate for smaller or simpler layouts and progressively enhances them as more space becomes available. Larger layouts are commonly introduced with min-width media queries.

Detailed Explanation

Mobile-first CSS starts with styles appropriate for smaller or simpler layouts and progressively enhances them as more space becomes available. Larger layouts are commonly introduced with min-width media queries.

This approach often produces simpler base styles and encourages developers to prioritize essential content. It does not mean designing only for phones; all target viewport sizes still require deliberate design and testing.

Code Example

.navigation {
    display: block;
}

@media (min-width: 768px) {
    .navigation {
        display: flex;
        gap: 1rem;
    }
}