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.
<hr />
Consider an id 'text' with font-size as 3rem.
<pre><code>#text{
 font-size:3rem;
}
</code></pre>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.
<pre><code>#text{
 font-size:7vw;
}
</code></pre>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.
<pre><code>#text {
 font-size:clamp(2rem,7vw,4rem);
}
</code></pre>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.
<hr />
Originally posted in <a href="https://abhinavvp.com/" class="autolinkedURL autolinkedURL-url" target="_blank">abhinavvp.com</a>

**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;
}
``` 

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;
}
```
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);
}
```
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.

---
*Originally posted in  https://abhinavvp.com/*

Using clamp() for responsiveness