CSS Functions

CSS Functions

Anil Verma's photo
Anil Verma
·Apr 20, 2021·

Subscribe to my newsletter and never miss my upcoming articles

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