min(), max() and clamp()
min() chooses the smallest value, max() chooses the largest, and clamp() constrains a value between a minimum and maximum while allowing a preferred fluid value.
These functions are powerful for responsive typography, spacing, containers, and component dimensions.
min(), max() and clamp()
Fluid Typography
h1 {
font-size: clamp(2rem, 5vw, 4rem);
}
.container {
width: min(100% - 2rem, 1200px);
}
.panel {
padding: max(1rem, 3vw);
}💡 These functions encode responsive constraints directly in CSS.
Key Takeaways
min()chooses the smallest value.max()chooses the largest value.clamp()provides minimum, preferred, and maximum values.
Knowledge Check
What is the general syntax of `clamp()`?