实现响应式布局,一定会想到媒体查询,媒体查询有一个不太方便的地方,不同的设备都要写一套兼容方案。今天就分享一种新的解决方案——clamp()函数。
提到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;
}
刚刚讲了很多min()的内容,接下来进入主题,clamp是什么,先看看官方定义:
clamp()函数的作用是把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。它接收三个参数:最小值、首选值、最大值。
接下来看个例子:
.css-clamp {
width: clamp(200px, 50vw, 300px)
}
.css-min {
width: 50vw;
}
@media ( min-width: 600px ) {
.css-min {
width: 300px;
}
}
@media ( max-width: 400px ) {
.css-min {
width: 200px;
}
}