设置最小值与最大值 css,一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景...

作者：Ahmad shaded

译者：前端小智

来源：sitepoint点赞再看，微信搜索【大迁世界】关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。

大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。

2020年4月8日，Firefox浏览器支持了 CSS 比较函数(min()，max()，clamp())，这意味着现在所有主流浏览器都支持它们。 这些CSS函数最大的作用就是可以为我们提供动态布局和更灵活设计组件方法。

简单的这些元素主要用来设置元素尺寸，如容器大小，字体大小，内距，外距等等 。在这篇文章中，我将用一些示例和大家一起来探讨这几个函数在实际中的使用，希望能更好的帮助大家理解它们。

兼容性

min 和 max 的支持情况：

clamp()的支持情况：

CSS 比较函数

根据CSS规范，比较函数是关于比较多个值并取其一的操作，我们来研究一下函数。

Min() 函数

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

考虑下面的例子，我们希望元素的最大宽度为500px。.element {

width: min(50%, 500px);

}

浏览器需要在(50%，500px) 取一个最小值，因为有个百分比，所以最终结果取决于视口宽度。如果50%的计算值大于500px，那么就取 500px。

否则，如果50%计算值小于500px，则50%将用作宽度的值，假设视口的宽度是 900px， 最终元素的宽度为 900px x 50% = 450px。

下面是一个交互的动画为了让大家更好的理解：