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);
网友评论