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

目录
文章目录隐藏
  1. min()函数
  2. max()函数
  3. clamp()函数
  4. 结语

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 还要让人兴奋,拭目以待吧。

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

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » CSS的 min() max() clamp()数学函数的简单介绍

发表回复