1.基本介绍
我们知道不仅仅JS里面有函数，其实CSS里面也有函数的，比如calc()、max()等等都是CSS函数，今天我们讲的clamp() 也是CSS的一个函数。
学习一个新的知识我们都先就要去官网看看，毕竟这才是权威，我们先来看看官网是怎么解释的。
官网解释：
clamp()函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
估计很多小伙伴都会被上面官网的解释绕晕吧！不过我们应该还是有个大概的理解，我们从上面的话中抽出一些关键词，方便大家理解。
关键词：
- 限制值范围
- 最大值
- 最小值
- 三个参数
上面的关键词中我们先来学习三个参数，了解了三个参数之后我们就会很快理解该函数做什么了。
接收参数：
MIN：最小值，通常就是我们CSS表示大小的单位，比如rem，px，vw等等VAL：首选值，通常就是我们CSS表示大小的单位，比如rem，px，vw等等MAX：最大值，通常就是我们CSS表示大小的单位，比如rem，px，vw等等
知道这三个参数后，我们在将这三个参数代入官方的解释中去看，应该就能理解了，我们
这里用自己的话讲解一遍。
通俗解释：
既然
clamp()是一个函数，那么该函数的返回值是什么呢？首先该函数接收三个参数，形如clamp(MIN, VAL, MAX)，三个参数分别代表最小值、首选值、最大值。当VAL < MIN时，函数返回MIN，当VAL > MAX时，函数返回MAX，当MIN < VAL < MAX时，函数返回VAL。
到这里我们应该就能真正理解该函数在做什么了，无非就是三个参数之间的比较，然后返回不同的值罢了。
那和我们的响应式有什么关系呢？
响应式的页面原理就是根据不同设备大小渲染不同的CSS，而我们这里的函数也是根据VAL的大小，返回不同的值，是不是和我们的响应式有相似之处了，所以我们可以利用clamp函数来实现响应式布局。
2.简单使用
既然知道了clamp函数的语法以及作用，那么我们可以写一个简单的小案例加深一下印象，也为小伙伴们思考它的使用场景提供一点思路。
实现需求：
屏幕大小发生变化，字体大小也会发生变化。
这是一个很常见的需求，我们需要在不同的屏幕大小之下显示不同的字体大小。
代码如下：
<head> <style> div { height: 100px; width: clamp(400px, 40vw, 500px); font-size: clamp(1.8rem, 10vw, 3.8rem); border: 1px solid green; } </style> </head> <body> <div>字体</div> </body>
实现效果：
上段代码中给div设置宽度时利用clamp函数，其中MIN=400px，VAL=40vw，MAX=500px。当我们拖动控制台时，40vw的实际宽度也是在跟着变化的，当40vw<400px时，div的宽度为400px，当40vw>500px时，div的宽度为500px，当400px<40vw<500px，div的宽度为40vw。
同理，代码中的字体大小的具体值我们也利用了clamp函数，字体最小为1.8rem，最大为3.8rem。具体结果都是VAL与MIN和MAX比较得出的。
3.响应式布局
前面我们的简单示例也算实现了响应式，不过没有那么正式，可能很多小伙伴还体会不到它的魅力。我们接下来就稍微正式一点，利用clamp实现一个简单的响应式页面。
代码如下：
<head> <style> * { box-sizing: border-box; } body { padding: 5px; background: #84a0ab; } .header { padding: 12px; text-align: center; background: #fffaf6; font-weight: bold; } .card { background-color: #8f8261; padding: 10px; margin-top: 20px; font-weight: bold; } img { width: clamp(15vw, 800%, 100%); // 图片宽度使用为100% } h1 { font-size: clamp(20px, 5vw, 35px); } p { font-size: clamp(10px, 4vw, 20px); } </style> </head> <body> <div class="header"> <h1>小猪课堂</h1> <p>我是小猪课堂，公众号资料分享大师</p> </div> <div class="card"> <h2>TITLE HEADING</h2> <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aba59ae2575b4a6082bec782cd8c2ade~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" /> <p> 我是小猪课堂我是小猪课堂我是小猪课堂我是小猪课堂 我是小猪课堂我是小猪课堂我是小猪课堂我是小猪课堂 我是小猪课堂我是小猪课堂我是小猪课堂我是小猪课堂 我是小猪课堂我是小猪课堂我是小猪课堂我是小猪课堂 </p> </div> </body>
实现效果：
从上图中我们可以看到当屏幕大小不断变化时，我们的字体大小以及标题都是在跟着变化的。在上段代码中我们分别给p标签、h1标签以及img标签都使用了clamp函数，以此来动态设置它们的大小。
我们常见的响应式布局其实就和上图类似了，我们只需要最大最小临界值即可了。
但是我们仔细想一想会发现，我们的设备有很多，比如平板、电脑、手机等等，这个时候就会出现多个首选值VAL，虽然我们可以利用clamp函数实现基本的响应式，但是如果想要更加细分每个设备显示为什么样，可能还需要借助max()、min()函数了。
比如我们还可以使用clamp与flex布局结合的方式实现响应式布局。
总结
clamp()函数自身是不复杂的，我们学会使用它非常快，但是难点在于我们如何判断一个场景是否可以使用它，这就是需要我们日积月累的经验来决定了。比如说我们需要做手机和电脑端的响应式，那么完全可以利用clamp函数，当元素宽度小于某个值时，我们的字体、宽度、等等都可以设置为某个值，这就简单的实现了响应式布局。当然实现响应式布局的方式还有很多种，需要大家下来了解了。
如果觉得文章太繁琐或者没看懂，可以观看视频： 小猪课堂
