CSS比較函數從2020年4月就開始支援了，我喜歡使用這些函數，但最喜歡的是 clamp()，它也是我最常用的一個。在這堂課中，我們詳細來看這些比較函數。
clamp() 函數的作用是把一個值限制在一個上限和下限之間，當這個值超過最小值和最大值的範圍時，在最小值和最大值之間選擇一個值使用。它接收三個參數：最小值、首選值、最大值。 【學習影片分享：css影片教學、web前端】
在下面這個例子中，有一個手機樣式，同時有兩張圖片放置在上面，如下所示:
#當容器的寬度變小時，我們要縮小圖片的尺寸，這樣才不會變形。一般使用百分比單位來解決，如 width: 20%，但是這種方式沒有給我們太多的控制。
我們希望能夠有一個流體尺寸，要求有最小值和最大值，這就是 clamp 出場的地方。
.section-image {
width: clamp(70px, 80px + 15%, 180px);
}#有時候，我們需要在頁面角落加上一些修飾元素，該修飾元素需要具有響應式，例如PC 端是這樣的（黑點部分）：
然後在行動端是長這樣的：
為了做到這，我們可以使用媒體查詢：
.decorative--1 {
left: 0;
}
.decorative--2 {
right: 0;
}
@media (max-width: 600px) {
.decorative--1 {
left: -8rem;
}
.decorative--2 {
right: -8rem;
}雖然這樣做可以，但我們可以clamp()函數，這樣更簡潔：
.decorative--1 {
left: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
}
.decorative--2 {
right: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
}有時候，我們頁面的主區的高度需要根據視窗大小而改變。這種場景，我們傾向於透過媒體查詢或使用視口單位來改變這種情況。
.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;
}
}但需要注意在較大的視口上高度不能太過高，所以我們需要設定一個最大高度,使用CSS clamp()，我們可以只用一個CSS宣告來設定最小、首選和最大高度。
.hero {
min-height: clamp(250px, 50vmax, 500px);
}當調整螢幕大小時，我們會看到，高度會根據視窗寬度逐漸改變。在上面的範例中，50vmax表示著視窗最大尺寸的 50%。
進度條一般是從左到右一個載入過程，在CSS 中，我們可以定位在左邊：
.loading-thumb {
left: 0%;
}為了將進度條定位到最右邊，我們可以使用left: 100%，但這會帶來一個問題。進度條會跑到容器外：
.loading-thumb {
left: 100%;
}這是正常的情況，100% 是從進度條的末端開始的，而進度條本身也有自己的寬度，所以實際寬度會大於容器的寬度。
我們可以用calc() 來減去的進度條寬度，這樣就可以了，但這並不是100%有效：
.loading-thumb {
/* 40px represents the thumb width. */
left: calc(100% - 40px);
}我們來看下，如何利用CSS變數和比較函數來更好地實現：
.loading-thumb {
--loading: 0%;
--loading-thumb-width: 40px;
position: absolute;
top: 4px;
left: clamp(
0%,
var(--loading),
var(--loading) - var(--loading-thumb-width)
);
width: var(--loading-thumb-width);
height: 16px;
}上面的步驟如下：
首先，我們設定一個最小值為 0%
首選值是--loading CSS變數的目前值
最大值代表当前的加载量减去进度条件的宽度
这里的CSS clamp()为我们提供了这个组件的三种不同的状态信息，这个方案很 nice:
不仅如此，我们还可以以相同的方式来处理不同UI
.loading-progress {
width: clamp(10px, var(--loading), var(--loading) - 10px);
}最小值等于圆圈宽度的一半，首选值是当前的加载百分比，最大值是当前百分比与圆圈一半的减去结果。
考虑下图，我们在两个区域之间有一个行分隔符。
在移动端上，这个分隔符应该变成水平的，如下图：
我的解决方案是使用一个边框和flex。思路是，边框作为伪元素，以填补垂直和水平状态的可用空间：
.section {
display: flex;
flex-direction: column;
gap: 1rem;
}
.section:before {
content: "";
border: 1px solid #d3d3d3;
align-self: stretch;
}
@media (min-width: 700px) {
.section {
align-items: center;
flex-direction: row;
}
}我们也可以使用 clamp 而不需要媒体查询的解决方案：
.section {
--breakpoint: 400px;
display: flex;
flex-wrap: wrap;
}
.section:before {
content: "";
border: 2px solid lightgrey;
width: clamp(0px, (var(--breakpoint) - 100%) * 999, 100%);
}来剖析一下上面的CSS:
0，因为我们使用的是一个CSS边框(var(--breakpoint) - 100%) * 999 是一个个切换器，根据视口宽度在 0px或 100% 之间切换。一年前，发现了一个巧妙的CSS技巧。使用CSS max()函数，根据视口宽度，将卡片的border-radius 从 0px 切换到 8px。
.card {
border-radius: max(
0px,
min(8px, calc((100vw - 4px - 100%) * 9999))
);
}来剖析一下上面的CSS:
我们有一个 max() 函数，在 0px 和 min()的计算值之间进行比较，并选择较大的值。
min() 函数在 8px 和 calc((100vw - 4px - 100%) * 9999 的计算值之间进行比较,这会得到一个非常大的正数或负数。
9999 是一个很大的数字，这样 min 的值都是 8px
有时，我们可能需要根据视口宽度来改变一个组件或一个网格的间距。有了CS函数就不一样了,我们只需要设置一次。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: min(2vmax, 32px);
}
原文地址：https://isdeed.com/article/use-cases-css-comparison-functions/
更多编程相关知识，请访问：编程视频！！
以上是詳解css中的比較函數（範例介紹）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
