clamp() 函數(shù)的作用是把一個值限制在一個上限和下限之間，當(dāng)這個值超過最小值和最大值的范圍時，在最小值和最大值之間選擇一個值使用。它接收三個參數(shù)：最小值、首選值、最大值。

流體的尺寸和定位

在下面這個例子中，有一個手機(jī)樣式，同時有兩張圖片放置在上面，如下所示:

當(dāng)容器的寬度變小時，我們要縮小圖片的尺寸，這樣才不會變形。一般使用百分比單位來解決，如 width: 20%，但是這種方式?jīng)]有給我們太多的控制。

我們希望能夠有一個流體尺寸，要求有最小值和最大值，這就是 clamp 出場的地方。

事例地址：codepen.io/shadeed/pen…

裝飾性元素

有時候，我們需要在頁面邊角加一些修飾元素，該修飾元素需要具有響應(yīng)式，比如 PC 端是這樣的（黑點部分）：

然后在移動端是長這樣的：

為了做到這，我們可以使用媒體查詢：

雖然這樣做可以，但我們可以 clamp()函數(shù)，這樣更簡潔：

事例地址：codepen.io/shadeed/pen…

流體高度

有時候，我們頁面的主區(qū)的高度需要根據(jù)視口大小而變化。這種場景，我們傾向于通過媒體查詢或使用視口單位來改變這種情況。

我們也可以混合使用固定值和視口單位:

但需要注意在較大的視口上高度不能太過高，所以我們需要設(shè)置一個最大高度,使用CSS clamp()，我們可以只用一個CSS聲明來設(shè)置最小、首選和最大高度。

當(dāng)調(diào)整屏幕大小時，我們會看到，高度會根據(jù)視口寬度逐漸改變。在上面的例子中，50vmax表示著視口最大尺寸的 50%。

事例地址：codepen.io/shadeed/pen…

Loading Bar

進(jìn)度條一般是從左到右一個加載過程，在 CSS 中，我們可以定位在左邊：

.loading-thumb {

  left: 0%;

}

為了將進(jìn)度條定位到最右邊，我們可以使用 left: 100%，但這會帶來一個問題。進(jìn)度條會跑到容器外：

.loading-thumb {

  left: 100%;

}

這是正常的情況，100% 是從進(jìn)度條的末端開始的，而進(jìn)度條本身也有自己的寬度，所以實際寬度會大于容器的寬度。

我們可以使用 calc() 來減去的進(jìn)度條寬度，這樣就可以了，但這并不是100%有效：

.loading-thumb {

  /* 40px represents the thumb width. */

  left: calc(100% - 40px);

}

我們來看下，如何利用CSS變量和比較函數(shù)來更好地實現(xiàn)：

上面的步驟如下：

1. 首先，我們設(shè)定一個最小值為 0%

2. 首選值是 --loading CSS變量的當(dāng)前值

3. 最大值代表當(dāng)前的加載量減去進(jìn)度條件的寬度

這里的CSS clamp()為我們提供了這個組件的三種不同的狀態(tài)信息，這個方案很 nice:

不僅如此，我們還可以以相同的方式來處理不同UI

.loading-progress {

  width: clamp(10px, var(--loading), var(--loading) - 10px);

}

最小值等于圓圈寬度的一半，首選值是當(dāng)前的加載百分比，最大值是當(dāng)前百分比與圓圈一半的減去結(jié)果。

事例地址：codepen.io/shadeed/pen…

動態(tài)分割器

考慮下圖，我們在兩個區(qū)域之間有一個行分隔符。

在移動端上，這個分隔符應(yīng)該變成水平的，如下圖：

我的解決方案是使用一個邊框和flex。思路是，邊框作為偽元素，以填補(bǔ)垂直和水平狀態(tài)的可用空間：

我們也可以使用 clamp 而不需要媒體查詢的解決方案：

來剖析一下上面的CSS:

• 0px：最小值，用于垂直分隔符。它的值是 0，因為我們使用的是一個CSS邊框

• (var(--breakpoint) - 100%) * 999 是一個個切換器，根據(jù)視口寬度在 0px或 100% 之間切換。

動態(tài) border Radius

一年前，發(fā)現(xiàn)了一個巧妙的CSS技巧。使用CSS max()函數(shù)，根據(jù)視口寬度，將卡片的border-radius 從 0px 切換到 8px。

來剖析一下上面的CSS:

• 我們有一個 max() 函數(shù)，在 0px 和 min()的計算值之間進(jìn)行比較，并選擇較大的值。

• min() 函數(shù)在 8px 和 calc((100vw - 4px - 100%) * 9999 的計算值之間進(jìn)行比較,這會得到一個非常大的正數(shù)或負(fù)數(shù)。

• 9999 是一個很大的數(shù)字，這樣 min 的值都是 8px

間距

有時，我們可能需要根據(jù)視口寬度來改變一個組件或一個網(wǎng)格的間距。有了CS函數(shù)就不一樣了,我們只需要設(shè)置一次。

原文鏈接