作者：Ahmadshaded译者：前端小智来源：sitepoint点赞再看，微信搜索【大运世界】注意这个人，没有大厂背景，但态度积极。本文已收录到GitHubhttps://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，最终元素宽度将为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))。考虑下面的example.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()，如下代码所示：.type{/*强制字体大小保持在12px和100px之间*/字体大小：clamp(12px,10*(1vw+1vh)/2,100px);}用例侧边栏和主界面通常，页面的侧边栏是固定的，主界面是灵活的。如果视口足够大，我们可以根据视口的大小动态增加侧边栏的宽度，这里我们可以使用max()函数为其设置最小宽度。考虑以下示例：.wrapper{display:flex;}aside{flex-basis:max(30vw,150px);}main{flex-grow:1;}如果视口大于500px，侧边栏将有一个最小值宽度为150像素（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{内容:attr(数据测试);font-size:max(13vw,50px);}sourcecode:https://codepen.io/shadeed/pen/e0128b73de7c84cb9b98cf733a3835c4?editors=1100smoothgradientwhen在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://代码笔。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=1100Borderandshadow在一些设计案例中，如果元素边框的宽度和弧度都比较大，那么在移动的时候应该最小化。通过使用clamp()我们可以根据视口宽度使其动态变化。.element{box-shadow:03px10px0红色;边框：最小（1vw，10px）实心#468eef；border-radius:clamp(7px,2vw,20px);box-shadow:03pxclamp(5px,4vw,50px)0rgba(0,0,0,0.2);}示例源代码：https://codepen.io/shadeed/pen/7b5c7979e09573ca32150ebfc7f74a66?editors=1100GridGapIn一个使用样式布局的界面，如果我们想使用clamp()很容易调整网格之间的间距：.wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:clamp(1rem,2vw,24px);}示例源代码：https://codepen.io/shadeed/pen/a14c7d9fcbbae84340a4f83833294f5b?editors=1100如果在不兼容的浏览器中使用这些方法以及任何新的CSS函数,提供后备计划很重要。为此，我们可以使用以下方法之一：1.手动添加回退方案我们可以在使用比较功能之前添加一个默认方法，如下所示：.hero{padding:4rem1rem;padding:clamp(2rem,10vmax,10rem)1rem;}支持的浏览器将忽略第一个填充，不支持的浏览器将使用第一个填充。使用CSS@supports我们可以使用@supports来检测浏览器是否支持CSS比较功能，像这样：.hero{/*默认值，对于不支持的浏览器*/padding:4rem1rem;}@supports(width:min(10px,5vw)){/*对于支持的浏览器*/.hero{padding:clamp(2rem,10vmax,10rem)1rem;}}无法实时知道代码部署后可能存在的BUG，事后解决这些BUG需要花费大量时间进行日志调试。顺便推荐一个好用的BUG监控工具，Fundebug。原文：https://heydesigner.com/every...每周更新交流文章。可以微信搜索【大千世界】第一时间阅读，回复【福利】还有很多前端视频等着你。本文在GitHub上https://github.com/qq449245884/xiaozhi已收录，欢迎Star。