写在前面
在做网站开发的过程中，经常会针对不同屏幕尺寸去做相应的 css 样式，但是这样会非常耗费精力，大多数情况是，在大尺寸设备上做一套css，在小设备上做一套css。举一个比较常用的例子，padding 内边距，如果只在大或小设备上设置padding 尺寸，但是在中型设备上就会出现文字左右边距过小的情况。
有没一种方法可以根据不同窗口的大小像流体一样自动适应调整。CSS中 clamp() 函数来可以代替针对不同设备的固定值。
什么是 clamp() 函数？
clamp()函数有三个参数，分别是最小值、首选值、最大值，其具体语法：clamp(MIN, VAL, MAX) 它的作用是把一个值限制在一个上限和下限之间。不同设备，不同断点，一个padding 属性我们往往会需要设置4个值，桌面端、平板端、移动端、横向移动端，用好 clamp()函数，可以很好的从繁杂的工作中解脱出来。
如何使用 clamp()函数？
手动去写 clamp()函数，对于我们一般用户可能存在一些困难，我们可以借助网上的工具网站帮我们生成。在使用工具之前，我们需要确定我们设备视口的最大和最小值。
比如，我需要设置padding属性在477px-1200px视口下，在20-25px的范围内变化，我就可以将这些数据输入到下面类似的计算其中，就可以得到 clamp() 函数的计算式，就像这样，clamp(20px, calc(1.25rem + ((1vw - 4.77px) * 0.6916)), 25px)
- 上图中用到的小工具地址： Fluid-responsive property calculator
针对文字使用 clamp()函数
- h1-h6字体的设置是个更加繁琐的工作，这里使用 clamp()函数来设置流体字体，可以很好的兼容各个设备，大大减少工作量。
- 这里在给一个字体的计算器: https://www.fluid-type-scale.com/
