OveUI博客
老前端的戎码生涯

css中好用的clamp()函数

clamp() 函数的作用是把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。

语法

clamp() 函数接收三个用逗号分隔的表达式作为参数,按最小值、首选值、最大值的顺序排列。

width: clamp(最小值, 首选值, 最大值)

{
    font-size: clamp(20px, 18px, 40px); 
    width: clamp(100px, 100%, 200px);
}
  • 当首选值比最小值要小时,则使用最小值。
  • 当首选值介于最小值和最大值之间时,用首选值。
  • 当首选值比最大值要大时,则使用最大值。

兼容性

https://caniuse.com/?search=clamp
从 caniuse 网站可以看出,不支持IE11

赞(0)
未经允许不得转载:UI树欲静 » css中好用的clamp()函数