Responsive Functions: calc(), clamp(), min(), max()
14 min read
calc()clamp()min()max()Fluid TypographyResponsive DesignCSS Math
CSS Math Functions
These functions eliminate the need for many media queries by creating fluid, responsive values that scale automatically.
Function Reference
| Function | Returns | Use Case |
|---|---|---|
calc() | Computed value from expression | Mixing units: calc(100% - 2rem) |
min() | Smallest value | Responsive max: width: min(600px, 90%) |
max() | Largest value | Responsive min: font-size: max(1rem, 2vw) |
clamp() | Middle value, clamped | Fluid typography: clamp(1rem, 3vw, 2rem) |
clamp() Explained
clamp(MIN, PREFERRED, MAX)
- MIN: The value will never go below this
- PREFERRED: The ideal value (usually responsive like vw)
- MAX: The value will never exceed this
Example: font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem)
- On mobile (320px): resolves to 1rem (minimum)
- On tablet (768px): resolves to ~1.7rem (fluid)
- On desktop (1920px): resolves to 2.5rem (maximum)