css:比较函数min(),max(),clamp()

Min() 函数

min() 函数支持一个或多个表达式，每个表达式之间使用逗号分隔，以最小的表达式的值作为返回值，可以使用 min() 为元素设置最大值。

.element{
    width: min(50%, 500px)
}

当浏览器50%大于500px 取值500px
当浏览器50%小于500px 取值50%

Max() 函数

max() 函数以最大值为返回值，语法跟 min() 函数类似。可以使用 max() 函数为元素设置最小值。

.element{
    width: max(50%, 500px);
}

浏览器需要在 (50%, 500px) 取一个最大值，第一个值是指当前视口宽度的50%。如果 50% 的计算小于 500px ，则取 500px ，反之取 50%。

Clamp() 函数

clamp(MIN, VAL, MAX)。其中 MIN 表示最小值， VAL 表示首选值， MAX 表示最大值。意思是，如果 VAL 在 MIN 和 MAX 范围之间，则使用 VAL 作为函数返回值；如果 VAL 大于 MAX，则使用 MAX作为返回值；如果 VAL 小于 MIN ，则使用 MIN 作为返回值。

.element{
    width: clamp(200px, 50%, 1000px);
}

https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

font-size: clamp(1rem, 2.5vw, 2rem);