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?
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
2.The target value (ideally a relative unit)
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
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.