CSS比较函数从2020年4月开始支持。我喜欢用这些函数，但我最喜欢的是clamp()，这也是我的最爱。一种常用的。在本课中，我们将详细了解这些比较函数。Clamp()、Max()和Min()函数clamp()函数的作用是将一个值限制在上限和下限之间。当值超出最小值和最大值的范围时，从最小值和最大值中选择一个使用。它接收三个参数：最小值、首选值、最大值。fluidsizeandpositioning在下面的例子中，有一个手机样式，同时在上面放了两张图片，如下：当容器的宽度变小时，我们需要缩小图片的尺寸所以它不会变形。一般用百分比单位来解决，比如width:20%，但是这种方法并不能给我们太多的控制权。我们希望能够有一个需要最小值和最大值的流体大小，这就是clamp的用武之地。.section-image{width:clamp(70px,80px+15%,180px);}示例地址：https://codepen.io/shadeed/pen/qBYPdOq?editors=1100。装饰元素有时，我们需要在页面的角落添加一些装饰元素。装饰元素需要响应。比如PC端是这样的（黑点部分）：移动端是这样的：为了做到这一点，我们可以使用媒体查询：.decorative--1{left:0;}.decorative--2{right:0;}@media(max-width:600px){.decorative--1{left:-8rem;}.decorative--2{右：-8rem；}虽然这行得通，但我们可以clamp()更简洁的函数：.decorative--1{left:clamp(-8rem,-10.909rem+14.55vw,0rem);}.decorative--2{右：夹子（-8rem，-10.909rem+14.55vw，0rem）；示例地址：https://codepen.io/shadeed/pen/LYmzVZW?editors=1100。流体高度有时，我们页面主要区域的高度需要根据视口大小而变化。在这种情况下，我们倾向于通过媒体查询或使用视口单元来改变这一点。.hero{min-height:250px;}@media(min-width:800px){.hero{min-height:500px;}}我们也可以混合使用固定值和视口单位：.hero{min-height:calc(350px+20vh);}@media(min-width:2000px){.hero{min-height:600px;但需要注意的是，在较大的视口上高度不能太高，因此我们需要设置一个最大高度，使用CSSclamp()我们可以通过一个CSS声明来设置最小、首选和最大高度。.hero{min-height:clamp(250px,50vmax,500px);}在调整屏幕大小时，我们会看到高度会根据视口宽度逐渐变化。在上面的示例中，50vmax表示视口最大尺寸的50%。示例地址：https://codepen.io/shadeed/pen/LYmzVZW?editors=1100。LoadingBar进度条一般是从左到右的加载过程。在CSS中，我们可以将其定位在左侧：.loading-thumb{left:0%;}为了将进度条定位到最右侧，我们可以使用left:100%，但这会带来一个问题。进度条会跑到容器外：.loading-thumb{left:100%;}这是正常情况，100%是从进度条的尾部开始，进度条本身有自己的宽度，所以实际宽度将大于容器的宽度。我们可以使用calc()来减去进度条的宽度，这会起作用，但它不是100%有效：.loading-thumb{/*40px表示拇指宽度。*/left:calc(100%-40px);}下面看看如何使用CSS变量和比较函数来实现更好：.loading-thumb{--loading:0%;--loading-thumb-width:40px;位置：绝对；顶部：4px；左：clamp(0%,var(--loading),var(--loading)-var(--loading-thumb-width));宽度：var(--loading-thumb-width);height:16px;}以上步骤如下：首先我们设置一个最小值0%。首选值是--loadingCSS变量的当前值。最大值表示当前负载减去进度条件的宽度。这里的CSSclamp()为我们提供了这个组件的三种不同的状态信息。这个解决方案非常好：不仅如此，我们还可以用相同的方式处理不同的UI。loading-progress{width:clamp(10px,var(--loading),var(--loading)-10px);}最小值等于圆宽度的一半，首选值为当前加载百分比，最大值是半个圆减去当前百分比的结果。案例地址：https://codepen.io/shadeed/pen/rNvGVOa?editors=0100。动态分隔符考虑下图，我们在两个区域之间有一个行分隔符。在移动设备上，这个分隔线应该变成水平的，如下所示：我的解决方案是使用边框和flex。这个想法是边框作为一个伪元素来填充垂直和水平的可用空间：.section{display:flex;弹性方向：列；gap:1rem;}.section:before{content:"";border:1pxsolidalign-self:stretch;}@media(min-width:700px){.section{align-items:center;弹性方向：行；}}我们也可以在没有媒体查询的情况下使用clamp解决方案：.section{--breakpoint:400px;显示：弹性；flex-wrap:wrap;}.section:before{content:"";边框：2px实心浅灰色；width:clamp(0px,(var(--breakpoint)-100%)*999,100%);}剖析上述CSS：0px：垂直分隔符的最小值。它的值为0因为我们使用的是CSS边框。(var(--breakpoint)-100%)*999是一个切换器，根据视口宽度在0px或100%之间切换。DynamicborderRadius一年前，人们发现了一个简洁的CSS技巧。使用CSSmax()函数根据视口宽度将卡片的边框半径从0px切换到8px。.card{border-radius:max(0px,min(8px,calc((100vw-4px-100%)*9999)));}为了剖析上面的CSS：我们在0px处有一个max()函数和值比较由min()计算出的值，选择较大的值。min()函数比较8px和calc((100vw-4px-100%)*9999的计算值，会得到一个非常大的正数或负数。9999是一个非常大的数，所以min的值都是8pxSpacing有时候，我们可能需要根据视口的宽度来改变一个组件或者一个grid的间距，用CS功能就不一样了，我们只需要设置一次。.wrapper{显示：网格；网格模板列：重复（3、1fr）；网格间隙：最小值（2vmax，32px）；}
