What is clamp function in CSS?

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

• General syntax for clamp clamp(MIN,VAL,MAX)

• clamp() can be used for any of the following data types:

  • <length>
  • <frequency>
  • <angel>
  • <time>
  • <percentage>
  • <number>
  • <integer>

Clamp function in action:

• Font size control using a clamp() with using a single media query

• Clamp() for controlling Image width

Resources:

• Mozilla Docs

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.