#yyds干货盘点#CSS的clamp()函数实现响应式布局

Posted 2022-06-24 尼羲

实现响应式布局，一定会想到媒体查询，媒体查询有一个不太方便的地方，不同的设备都要写一套兼容方案。今天就分享一种新的解决方案——clamp()函数。

min & max

提到clamp()函数，就不得不提的就是它的两个前辈函数——min()和max()，顾名思义，前者是取最小值，后者是取最大值。该节就以 ​min() 方法为例，详细介绍一下这两个函数的用法。

min()方法使用如下，以一个或多个逗号分隔的数学函数、字面量或是其他表达式作为参数，返回参数列表中的最小值：

property: min(expression [, expression])

举个例子：

width: min(9px, 10px);   //这时得到宽度是9px
font-size: min(2px + 8px, 11px);   //这里“+”左右要有空格 

不过，上面两个例子在现实中毫无意义，因为单纯比较 8px 和 9px 是没有实际应用场景，min 的主场还是在响应式布局上的。我们看个有意义的例子：

<style>
  .css-min 
    width: min(50vw, 300px);
  

  div 
    background-color: pink;
  
</style>

<div class="css-min">
  min(50vw, 300px)
</div>

解释一下上面的代码，如果视窗小于 600px, 则粉色区域占据一半的视窗宽度（50vw）；反之则宽度保持 300px。效果大约等价于如下传统方式——可以看出 min 代码简洁许多:

​max-width

.css-min 
  width: 50vw;
  max-width: 300px;

clamp

刚刚讲了很多min()的内容，接下来进入主题，clamp是什么，先看看官方定义：

clamp()函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。

接下来看个例子：

.css-clamp 
  width: clamp(200px, 50vw, 300px)

• 当屏宽小于 400px 时，首选值（50vw）小比下限（200px），所以返回最小值（200px）
• 当屏宽介于 400px 和 600px 之间时，首选值（50vw）介于最小值（200px）和最大值（300px）之间时，返回首选值（50vw）
• 当屏宽大于 600px 时，首选值（50vw）大比上限（300px），使用最大值（300px）

如果用媒体查询，得用下面数行代码来实现：

.css-min 
  width: 50vw;


@media ( min-width: 600px ) 
  .css-min 
    width: 300px;
  


@media ( max-width: 400px ) 
  .css-min 
    width: 200px;