DEV Community

Abhinav Vp
Abhinav Vp

Posted on • Edited on • Originally published at abhinavvp.com

Using clamp() for responsiveness

Clamp() is one of the most useful yet underrated functions in CSS to ensure responsiveness in web design.
Web pages can be viewed from multiple platforms, and you will have to ensure that the design won't break in any of the viewports.


Consider an id 'text' with font-size as 3rem.

#text{
  font-size:3rem;
}
Enter fullscreen mode Exit fullscreen mode

The problem is that irrespective of the viewport, font size remains constant. One way to deal with this is to replace rem with % or vw so that the font size becomes relative to the viewport.

#text{
  font-size:7vw;
}
Enter fullscreen mode Exit fullscreen mode

The issue that one could face with the above method is that there are no minimum and maximum limits. The text could get incredibly bigger or smaller depending upon the viewport.
This is where Clamp() comes to the rescue.

#text {
  font-size:clamp(2rem,7vw,4rem);
}
Enter fullscreen mode Exit fullscreen mode

Clamp() is a combination of min() and max(). It takes 3 arguments: the lower limit, the variable, and the upper limit. It clamps a value between the provided lower and upper limit. This ensures that the width remains relative to the viewport at the same time with a lower and upper bound.

Top comments (0)