Fun fact: ποΈ is the emoji for clamp according to emojipedia
Lets talk about css clamp()
function.
If you have ever wondered how you can define range to a css property e.g minimum, preferred or/and maximum value, then clamp
is the go to function.
Here is how you can use.
clamp(MIN,PREF,MAX)
You give a minimum value, a preferred value and a maximum value.
One of the most common use of clamp()
is in creating fluid/responsive typography. Your font-size
will change based on the viewport size without writing any additional media queries. You can give a minimum/maximum font-size
but everything in-between will be fluid if you use viewport units like vw
or vh
;
Here an example ( try to resize the result tab )
You can use clamp function for lengths, percentages, angles etc. You can read about it more here.
Top comments (0)