在本文中，我將探討一些比較函數的用例，并詳細解釋每一個用例，大多數情況下，用例將是關于將它們用于流動尺寸以外的情況，因為這是最流行的用例，我將把它留到最后。

　　如果你不了解比較函數，那也沒有關系，現在我們一起來學習。Clamp()、Max() 和 Min() CSS 函數的用例流體尺寸和定位在此示例中，我們有一個帶有手機的部分，以及位于頂部的兩個圖像。最初，它將如下圖所示：

　　當容器的寬度變小時，我們希望縮小圖像的大小以適應可用空間。我們可以通過使用寬度或高度的百分比值(例如：寬度：20%)來做到這一點，但這并沒有給我們太多的控制權。我們希望能夠有一個流體大小，它同時尊重最小值和最大值，這就是clamp來救援的地方!CSS:

　　通過設置最小、首選和最大寬度，圖像將根據其容器寬度縮小或增長，這是由于使用了固定值和百分比 80px + 15% 的混合。

　　演示地址：https://codepen.io/shadeed/pen/qBYPdOq?editors=1100

　　裝飾元素

　　如果你需要在部分項目中添加裝飾元素，大多數時候，元素需要響應，并且可能需要根據視口大小進行不同的定位，你會怎么做?

　　如下示例效果：

　　兩側有兩個裝飾元素。在移動設備上，它們會占用太多空間，因此我們只想展示其中的一小部分。

　　為了解決這個問題，我們可以在移動設備上使用媒體查詢來控制它們。

　　CSS:

　　雖然這可行，但我們可以使用帶有 CSS clamp() 函數的無媒體查詢解決方案。

　　CSS:

　　讓我剖析一下上面的 CSS，讓你更容易理解：

　　我們想要的是設置最小左偏移為-8rem，最大值為0rem。

　　有了這個，我們把它留給 CSS clamp() 來決定首選值并尊重我們設置的最小值和最大值。我用這個計算器(https://min-max-calculator.9elements.com/)得到了上面的 clamp() 數字。

　　演示地址：https://codepen.io/shadeed/pen/LYmzVZW?editors=1100

　　流體英雄高度

　　與前面的示例相關，英雄部分的高度可以根據視口大小而不同。因此，我們傾向于通過媒體查詢或使用視口單元來改變它。

　　CSS：

　　我們可以混合使用固定值和視口單位，但我們需要注意不要在較大的視口上設置很大的高度，然后，我們需要設置一個最大高度。

　　CSS：

　　使用 CSS clamp()，我們可以只用一個 CSS 聲明來設置最小、首選和最大高度。

　　調整屏幕大小時，你會注意到高度會根據視口寬度逐漸變化。在上面的示例中，50vmax 表示“視口最大尺寸的 50%。

　　加載條

　　這個例子的靈感來自 Andy Bell 的一條推文，我真的很喜歡在這個用例中使用 CSS clamp()!

　　條形按鈕應該從左到右進行動畫處理，反之亦然。在 CSS 中，按鈕可以絕對定位在左側。

　　CSS：

　　要將按鈕放在最右邊，我們可以使用 left: 100% 但這會帶來一個問題，按鈕將從裝載桿容器中吹出。

　　CSS：

　　這是意料之中的，因為在這種情況下 100% 從拇指末端開始，因此將其推出。

　　我們可以使用 CSS calc() 減去按鈕寬度，它會起作用，但這不是 100% 靈活的。

　　CSS:

　　讓我們探索如何使用 CSS 變量和比較函數來改進 CSS。

　　CSS:

　　以下是上述 CSS 的工作原理：

　　首先，我們將最小值設置為 0%。

　　首選值是 --loading CSS 變量的當前值。

　　最大值表示當前加載減去按鈕寬度。CSS clamp() 在這里為我們提供了這個組件的三個不同的統計信息，我個人喜歡這個解決方案!

　　不僅如此，我們還可以為不同的設計擴展相同的概念。考慮下圖：

　　當前進度值在它上面有一個小句柄，當值為 100% 時，我們需要寬度來尊重它。

　　如下圖所示，圓圈必須在最右側結束，如果我們不注意這一點，它最終會吹出手柄寬度的一半(參見帶有紅色標志的第二行)。

　　在這種情況下，我們可以使用 CSS clamp() 函數。

　　CSS:

　　最小值等于半圓寬度，優選值是當前加載百分比，最大值是半圓減去當前百分比的結果。

　　動態線分隔符

　　今年早些時候，我寫了一篇關于我正在開發的 UI 的有趣 CSS 解決方案的文章。

　　考慮下圖，我們在兩個部分之間有一個行分隔符。

　　在移動設備上，該分隔符應變為水平，如下所示。

　　我的解決方案是使用邊框和彈性框，這個方法是帶有邊框的偽元素可以擴展以填充垂直和水平狀態的可用空間。

　　CSS：

　　我們甚至可以通過使用 CSS clamp 來實現，Temani Afif 提出了一個根本不需要媒體查詢的解決方案。

　　CSS:

　　讓我們剖析一下上面的 CSS：

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

　　(var(--breakpoint) - 100%) * 999 根據視口寬度在 0px 或 100% 之間切換。條件邊界半徑

　　大約一年前，我在 Facebook 提要 CSS 中發現了一個巧妙的 CSS 技巧。它是關于使用 CSS max() 比較函數根據視口寬度將卡片的半徑從 0px 切換到 8px。

　　CSS:

　　讓我們詳細了解一下上面的 CSS。

　　現在我們來剖析一下上面的 CSS：

　　我們有一個 max() 函數，用于比較 0px 和 min() 的計算值，它將選擇較大的值。

　　min() 函數在 8px 和 calc((100vw - 4px - 100%) * 9999) 的計算值之間進行比較，這將導致非常大的正數或負數。

　　9999 是一個很大的數字，強制該值為 0px 或 8px。有了上面的內容，當卡片占據整個視口寬度時，它的半徑為零，或者在更大的屏幕上為 8px。

　　CSS 文章標題

　　在構建CSS 文章標題時，我需要一種方法來為內容添加動態填充，同時，在較小的視口上保持最小值。

　　這個想法是文章標題不包含在包裝元素中，因此我們需要一種方法來模擬內容實際上被包裝并與下面的內容對齊。

　　為此，我們需要一種在 CSS 中使用以下公式的方法：

　　感謝 CSS max() 函數，我們可以添加最小填充，以及在需要時切換到動態填充的方法。

　　CSS:

　　這個想法是我們需要最小填充為 1rem，然后，它將根據視口寬度動態變化。

　　間距

　　有時，我們可能需要根據視口寬度更改組件或網格的間距。不帶 CSS 比較功能!我們只需要設置一次。