HTML & CSS Interview Question #120

What are clamp(), min(), and max() in CSS?

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

Quick Interview Answer

CSS comparison functions allow values to respond to available space without numerous media queries. min() chooses the smallest calculated value, max() chooses the largest, and clamp() constrains a preferred value between a minimum and maximum.

Detailed Explanation

They are useful for fluid typography, spacing, widths, and responsive component dimensions. Values inside the functions can mix compatible units and calculations.

Code Example

.title {
    font-size:
        clamp(1.75rem, 4vw, 3.5rem);
}

.container {
    width: min(100% - 2rem, 75rem);
}

.sidebar {
    width: max(16rem, 20vw);
}