聊聊min(),max()和clamp()函数

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

CSS函数中的min()max()clamp()CSS值和单位模块第九部分,它们常被称为比较函数。这几个函数并不是什么最新的特性,早在2018年年底就有浏览器开始支持它们,今年4月份Firefox也开始支持这几个函数,这也意味着现在所有主流浏览器都支持这些函数。它们最大的作用就是可以为我们提供动态布局和更灵活设计组件方法。简单地说,这几个函数可以用来设置元素尺寸,比如容器大小,字号大小,内距,外距等。在这篇文章中,我将用一些示例和大家一起来探讨这几个函数在实际中的使用,希望能更好的帮助大家理解它们。

兼容性

Caniuse.com中的数据可以得知,到写这篇文章为止,min()max()clamp()函数已经得所有主流浏览器的支持了。

虽然说这几个函数得到主流浏览器的支持,但要用于实际项目中时,还是需要谨慎,或者说要做好相应的降级处理。比如人肉做降级处理:

.element {
    font-size: 20px;
    font-size: clamp(20px, (1rem + 3vw), 40px)
}

也可以通过@supports来做条件判断

.element {
    font-size: 20px;
}

@supports (width: min(10px, 3vw)) {
    .element {
        font-size: clamp(20px, (1rem + 3vw), 40px)
    }
}

不过这并不是阻碍我们继续往下阅读的主要原因。

在此之前

熟悉CSS的同学都知道可以使用min-width/heightmax-width/heightmin-contentmax-content等属性来设置容器尺寸,但这些属性并无法用来指定非容器的尺寸,比如字号大小,就没有min-font-sizemax-font-size属性。但在CSS的Grid布局中,有另一个函数minmax()更接近我们今天要聊的min()max()函数。不过,它们还是有着本质上的区别,当你阅读完后面的内容你就会更清楚。

共同的特征

如果你曾使用过minmax()函数的话,该函数能接受两个值,其中之一是最小值,另一个则是最大值。而min()max()clamp()函数可以用来比较多个值,并基于所使用的函数,其中一个值会被运用到CSS的属性上(当作属性值)。比如:

width: min(1vw, 4em, 80px)
width: max(1vw, 4em, 80px)
width: clamp(1vw, 4em, 80px)

还可以有更多的值,只需要注意,每个值之间必须使用逗号(,)来分隔:

property: min(value [, value]) || max(value [, value]) || clamp(value [, value])

而且,它们都可以像calc()数学函数,可以使用加、减、乘、除等四则运算的表达式,比如:

font-size: max(10 * (1vw + 1vh) / 2, 12px);
font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);

即:

property: min(expression [, expression]) || max(expression [, expression]) || clamp(expression [, expression])

另外,它们都可以用于以下任何属性中<length><frequency><angle><time><percentage><number>或者<integer>

还有就是,它们之间可以相互嵌套,而且还可以和calc()相互嵌套使用:

width: max(200px, min(50%, 1000px));
width: calc(min(800px, 100vw) / 6);

你可能还不知道上面示例代码所表达的含义,但不用着急,随着你继续往下阅读,你会明白它们的含义和所起作用。

语法

min()max()clamp()函数有点类似于calc()函数,也称为数学函数(Math Function),允许使用带有加法(+)减法(-)乘法(*)除法(/)的数学表达式作为分量值(Component Values)min()max()函数分别表示其包含的最小或最大的逗号分隔计算;clamp()函数表示其中心计算,返回一个区间范围的值(MIN,VAL,MAX),如果值(VAL)在最小(MIN)和最大值(MAX)区间内,则使用该值(VAL),如果值(VAL)大于最大值(MAX),则使用最大值(MAX),如果值(VAL)小于最小值(MIN),则使用最小值(MIN)。

它们的具体语法规则如下:

<min()> = min(<calc-sum>#)
<max()> = max(<calc-sum>#)
<clamp()> = clamp(<calc-sum>#3{})

其中<calc-sum>

<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> = <calc-value> [[ '*' | '/'] <calc-value>]*
<calc-value> = <number> | <dimension> | <percentage> | (<calc-sum>)

此外,+-操作符的两边都需要有空格,*/操作符可以在没有空格的情况下使用。

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/min-max-clamp-function.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部