Follow

Follow
CSS Functions

CSS Functions

Anil Verma's photo
Anil Verma
·Apr 20, 2021
Play this article

clamp()

clamps a value between an upper and lower bound
font-size: clamp(min, range, max); font-size: clamp(1rem, 1vw + 1rem, 2rem);

Means-
Minimmum font size will be 1 rem
Max Font size will be 2 rem
Range — 1vw + 1rem
if Range value gets calculated less than min value(here 1rem) then 1 rem will be set as font size
if Range value gets calculated more than max value(here 2rem) then 2 rem will be set as font size
if Range value gets calculated between max value(here 2rem) and min value (here 1rem) then in that case whatever range value is calculated will be applied.

Max()
width: max(40%,300px)
it means min-width:300px and width:40%

Max()
width: min(40%,300px)
it means max-width:300px and width:40%

Happy learning 👏👏

 
Share this