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

#yyds干货盘点#CSS的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;
}
}