CSS Functions

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%

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

Happy learning 👏👏

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anil Verma

Anil Verma

22 Followers

Hi there 👋, I am Anil Verma, a full stack web developer, and JavaScript enthusiast. 👥 Ask me anything about web development. 📖 Love to read and write.