Min Max and Clamp Functions
Use min(), max(), and clamp() for adaptive sizing that responds to container or viewport size.
Why CSS Comparison Functions?
CSS comparison functions let you express conditional sizing without JavaScript: "use this size but never smaller/larger than these bounds." They are the core of modern fluid, responsive design.
min() Function
min() returns the smallest of a comma-separated list of values. The browser picks whichever value is smallest at the current viewport size.
.container {
width: min(800px, 90%);
/* 800px on large screens, 90% on small — never exceeds 800px */
}All lessons in this course
- Absolute Units: px pt cm
- Relative Units: em and rem
- Viewport Units: vw vh dvh
- Min Max and Clamp Functions