CSS的 min() max() clamp()数学函数的简单介绍

CSS的 min() max() clamp()数学函数的简单介绍

今天码云笔记带大家简单了解一下css相关的数学函数在min() max() clamp()这3个数学函数在2018年底开始支持现代浏览器的,因此,如果你胆儿足够肥,是可以在实际项目中小范围使用的。

和calc()函数类似,任何可以使用<length>,<frequency>,<angle>,<time>,<percentage>,<number>或者<integer>数据类型的地方都可以使用min()/max()/clamp()这3个数学函数。

min() max() clamp()这3个数学函数和calc()函数是可以相互嵌套使用的,例如:

width: calc(min(800px, 100vw) / 6);

下面具体介绍下min() max() clamp()这3个数学函数。

min()函数

语法如下:

min(expression [, expression])

支持一个或多个表达式,每个表达式之间使用逗号分隔,然后以最小的表达式的值作为返回值。

例如:

width: min(10vw, 5em, 80px);

其中出现了2个相对长度值,1个固定长度值。因此,上面的width计算值最大就是80px。至于真实的宽度值,如果浏览器视口小于800px宽,或文字字号小于16px,则会更小。

也就是,虽然函数的名称是min(),表示最小,实际上这作用是用来限制最大值的。

min()函数的表达式可以是数学表达式(使用算术运算符)、具体的值或其他表达式(如attr()新语法)。

因此,下面这些CSS声明都是合法的:

/* 合法 */
width: min(10px * 10, 10em);
width: min(calc(10px * 10), 10em);
width: min(10px * 10, var(--width));

过去我们希望网页在桌面端浏览器1024像素,在移动端100%宽度是这么实现的:

.constr {
    width: 1024px;
    max-width: 100%;
}

现在有了min()

函数,我们只需要一句CSS声明就可以实现了:

.constr {
    width: min(1024px, 100%);
}

max()函数

max()函数和min()函数语法类似,区别在于max()函数返回的是最大值,min()函数返回的是最小值。

例如:

width: max(10vw, 5em, 80px);

表示最小宽度是80px,如果浏览器视口大于800px,或者文字字号大于16px,则最终的宽度值会更大。

也就是,虽然max()函数顾名思义是最大,但是实际作用是用来限制最小值的。

其他特性都和min()函数类似,不赘述。

clamp()函数

clamp()函数作用是返回一个区间范围的值。语法如下:

clamp(MIN, VAL, MAX)

其中MIN表示最小值,VAL表示首选值,MAX表示最大值。意思是,如果VAL在MIN和MAX范围之间,则使用VAL作为函数返回值;如果VAL大于MAX,则使用MAX作为返回值;如果VAL小于MIN,则使用MIN作为返回值。

clamp(MIN, VAL, MAX)实际上等同于max(MIN, min(VAL, MAX))。

我们举个例子看下效果:

<button>我的宽度是?</button>
button {
    width: clamp(200px, 50vw, 600px);
}

如果我们不断改变浏览器的宽度,可以看到按钮的宽度在200px-600px之间反复横跳。

例如浏览器视口很宽的时候,按钮宽度是600px;随着浏览器视口宽度不断变小,小到646px的时候,按钮的宽度变成了323px;随着浏览器视口宽度进一步变小,会发现按钮宽度维持在200px不再变小了。如下图所示。

clame

结语

CSS新特性出现的太多了太快,多到有些溢出,快到应接不暇。我感觉attr()支持数据类型的语法快要有浏览器支持了。要是支持了,可就厉害大发了比CSS Houdini还要让人兴奋,拭目以待吧。

这里是原文章文章链接直接跳转到您的网站

关注web前端开发的个人技术博客,分享前端经验和技巧
码云笔记 » CSS的 min() max() clamp()数学函数的简单介绍

发表评论

提供最优质的资源集合

立即查看 了解详情