HTML & CSS Interview Question #103

What is the difference between min-width and max-width media queries?

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

Quick Interview Answer

A min-width query applies when the viewport or media feature is at least the specified size, while max-width applies when it is no larger than the specified size.

Detailed Explanation

A min-width query applies when the viewport or media feature is at least the specified size, while max-width applies when it is no larger than the specified size.

Mobile-first styles commonly define the small-screen layout as the default and add capabilities with min-width queries. A desktop-first stylesheet may use max-width queries to simplify layouts as space decreases. Consistency and content-driven breakpoints are more important than blindly following either strategy.

Code Example

/* Mobile-first default */
.grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}