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还要让人兴奋,拭目以待吧。
这里是原文章文章链接直接跳转到您的网站
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » CSS的 min() max() clamp()数学函数的简单介绍