HTML & CSS
/Advanced
clamp(), min(), max()
Definition
Modern CSS math functions that allow you to set dynamic, mathematical boundaries for sizing and typography without needing media queries.
Explain Like I'm New
You want a font to be big on desktop, and small on mobile. Normally you write 3 media queries. With `clamp(1rem, 5vw, 3rem)`, you say: 'The font should scale fluidly based on screen size (5vw). BUT, never let it get smaller than 1rem, and never let it get larger than 3rem.' It does all the math automatically.
Real World Example
Fluid Typography. The font size grows and shrinks smoothly like a rubber band as you resize the window, stopping perfectly at the boundaries you set.
Common Use Cases
- •Fluid typography
- •Dynamic widths
- •Eliminating media queries
Interactive Example
Interview Questions
basic
- How many arguments does the `clamp()` function take?
intermediate
- If you write `width: min(500px, 100%);`, what happens on a 300px phone screen?