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

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

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

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

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

　　裝飾元素

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

　　如下示例效果：

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

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

　　CSS:

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

　　CSS:

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

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

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

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

　　流體英雄高度

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

　　CSS：

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

　　CSS：

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

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

　　加載條

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

　　條形按鈕應(yīng)該從左到右進(jìn)行動畫處理，反之亦然。在 CSS 中，按鈕可以絕對定位在左側(cè)。

　　CSS：

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

　　CSS：

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

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

　　CSS:

　　讓我們探索如何使用 CSS 變量和比較函數(shù)來改進(jìn) CSS。

　　CSS:

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

　　首先，我們將最小值設(shè)置為 0%。

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

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

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

　　當(dāng)前進(jìn)度值在它上面有一個小句柄，當(dāng)值為 100% 時，我們需要寬度來尊重它。

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

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

　　CSS:

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

　　動態(tài)線分隔符

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

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

　　在移動設(shè)備上，該分隔符應(yīng)變?yōu)樗?，如下所示?/p>

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

　　CSS：

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

　　CSS:

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

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

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

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

　　CSS:

　　讓我們詳細(xì)了解一下上面的 CSS。

　　現(xiàn)在我們來剖析一下上面的 CSS：

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

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

　　9999 是一個很大的數(shù)字，強(qiáng)制該值為 0px 或 8px。有了上面的內(nèi)容，當(dāng)卡片占據(jù)整個視口寬度時，它的半徑為零，或者在更大的屏幕上為 8px。

　　CSS 文章標(biāo)題

　　在構(gòu)建CSS 文章標(biāo)題時，我需要一種方法來為內(nèi)容添加動態(tài)填充，同時，在較小的視口上保持最小值。

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

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

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

　　CSS:

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

　　間距

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