Hi everyone, today I going to explain the importance of an inbuilt CSS function called clamp()
which can be used most of the time in building responsive web pages without the need of media queries.
What is a clamp function?
The clamp()
CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum.
While it’s a related idea to min() and max() it is different in specific ways:
- Order matters
It only takes 3 parameters
Those 3 parameters are
1.The minimum
2.The target value (ideally a relative unit)
3.The maximum
clamp(MIN, VAL, MAX)
clamp()
can be used for any of the following data types:
Clamp function in action:
- Font size control using a
clamp()
with using a single media query
Clamp()
for controlling Image width
Resources:
If you have any doubts related to this article or anything related to tech or software-engineering in general, drop a comment here or you can message me on twitter @ksridhar02.