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，则最终元素的宽度将为900pxx50%=450px。下面是一个互动动画，方便大家更好的理解：例子源码：https://codepen.io/shadeed/debug/f5e338c8a1c7cd29e382c72a5eb37e48/authMax()函数max()函数在语法上类似于min()函数，区别在于max()函数返回的是最大值，而min()函数返回的是最小值。同样，我们可以使用man()为元素设置最小值。考虑下面的示例，我们希望元素的最小宽度为500px。.element{width:max(50%,500px);}浏览器需要在(50%,500px)处取最大值，因为有百分比，所以最终结果取决于视口宽度。如果计算值的50%小于500px，则取500px。否则，如果50%的计算值大于500px，则将使用50%作为宽度值，假设视口的宽度为1150px，则最终元素的宽度将为1150pxx50%=575px。示例源码：https://cdpn.io/shadeed/debug/cca927df45964fbe1a8342ad3ace6d71Clamp()函数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))。考虑下面的例子.element{width:clamp(200px,50%,1000px);}假设我们有一个元素，最小宽度为200px，首选值为50%，最大值为1000px，如下：上面的计算过程是这样的：宽度永远不会低于200px。内容中间的首选值为50%。仅当视口宽度大于400px且小于2000px时有效。宽度不会超过1000px示例源码：https://codepen.io/shadeed/pen/924419f15bfdcf0cd0103b0587524b0b?editors=0010Contextmatters计算值取决于上下文。可以是%、em、rem、vw/vh。甚至百分比值也可以基于视口宽度（如果元素直接位于内部）或其父元素。数学表达式值得一提的是，clamp()函数也可以在不借助calc()的情况下用于数学表达式，如下代码所示：./font-size:clamp(12px,10*(1vw+1vh)/2,100px);}用例侧边栏和主界面通常，页面的侧边栏是固定的，主界面的宽度是灵活的。如果视口足够大，我们可以根据视口的大小动态增加侧边栏的宽度，这里我们可以使用max()函数为其设置最小宽度。考虑以下示例：.wrapper{display:flex;}aside{flex-basis:max(30vw,150px);}main{flex-grow:1;}如果视口大于500px，侧边栏的最小宽度是150px(500*30%=150)。示例源代码：https://codepen.io/shadeed/pen/7f9558f31fdf60bc08c827817c10bf3a?editors=1100titlefontsizeclamp()的一个很好的用例是用于标题。假设我们希望标题的最小尺寸为16像素，最大尺寸为50像素。clamp()函数会给我们一个介于两者之间的值。.title{font-size:clamp(16px,5vw,50px);}在这里使用clamp()很合适，因为它确保使用的字体大小可访问和可读。如果改成min()，就无法在小视图中控制字体了。.title{font-size:min(3vw,24px);/*不推荐，访问性差*/}在移动端，字体非常小。因此，不要对字体大小使用min()函数。当然，我们也可以通过媒体查询进行适配，但这样一来，我们就错过了一场使用**CSS比较功能**的实战。前面说过，可以在max()函数中嵌套min()来实现clamp()的效果，会模仿clamp()函数，如下：.title{font-size:max(16px,min(10vw,50px));}示例源码：https://codepen.io/shadeed/pen/db76480260c104df00c65991df90a203?editors=1100装饰标题注意上图中标题下方有一个大的半透明标题，为装饰标题文本根据视口的大小进行缩放。我们可以使用max()函数和CSS视口单位设置它的最小值。.section-title:before{content:attr(data-test);font-size:max(13vw,50px);}源代码：https://codepen.io/shadeed/pen/e0128b73de7c84cb9b98cf733a3835c4?editors=1100平滑渐变在CSS中使用渐变时，您可能需要稍微调整一下以使颜色之间的过渡更平滑。我们来看看下面的渐变：.element{background:linear-gradient(135deg,#2c3e50,#2c3e5060%,#3498db);}注意运动的过渡被一条比较明显的线隔开，这样不好.我们可以通过使用媒体查询来解决这个问题：@media(max-width:700px){.element{background:linear-gradient(135deg,#2c3e50,#2c3e5025%,#3498db)}}还有一种更简洁的方式即可使用min()函数，如下图：.element{background:linear-gradient(135deg,#2c3e50,#2c3e50min(20vw,60%),#3498db);}示例源码：https://codepen.io/shadeed/pen/2c4bf2ded32f66390fdef13409be4a10?editors=1100transparentgradient当我们需要在图片上放置文字时，应该给图片加一层渐变，让文字更易读。与前面的示例类似，渐变大小在小视图和大视图之间应该有所不同。见下图：.element{background:linear-gradient(totop,#0000,transparentmax(20%,20vw));}示例源代码：https://codepen.io/shadeed/pen/babf1bfd4c85eeb1b6f9f549dd0fe602?editors=1100containerwidth如果你有一个容器，其宽度应该是其父容器的80%，但不超过780px，你会使用什么？通常，你会使用max-width，像这样：.container{max-width:780px;width:80%;}这里也可以使用min()函数来设置元素的最大值：.container{max-width:min(80%,780px);}示例源码：https://codepen.io/shadeed/pen/3d8b44709b04efdd7336fe91363e3d76?editors=1100本文转载自微信公众号“大招天下”，可通过以下二维码关注。转载请联系大千世界公众号。
