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 不再变小了。如下图所示。
结语
CSS 新特性出现的太多了太快,多到有些溢出,快到应接不暇。我感觉 attr()支持数据类型的语法快要有浏览器支持了。要是支持了,可就厉害大发了比 CSS Houdini 还要让人兴奋,拭目以待吧。
这里是原文章文章链接直接跳转到您的网站
码云笔记 » CSS的 min() max() clamp()数学函数的简单介绍