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

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

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

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

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

　　裝飾元素

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

　　如下示例效果：

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

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

　　CSS:

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

　　CSS:

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

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

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

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

　　流體英雄高度

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

　　CSS：

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

　　CSS：

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

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

　　加載條

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

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

　　CSS：

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

　　CSS：

　　這是意料之中的，因?yàn)樵谶@種情況下 100% 從拇指末端開始，因此將其推出。

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

　　CSS:

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

　　CSS:

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

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

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

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

　　不僅如此，我們還可以為不同的設(shè)計(jì)擴(kuò)展相同的概念?？紤]下圖：

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

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

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

　　CSS:

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

　　動(dòng)態(tài)線分隔符

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

　　考慮下圖，我們?cè)趦蓚€(gè)部分之間有一個(gè)行分隔符。

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

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

　　CSS：

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

　　CSS:

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

　　0px：最小值，用于垂直分隔符。它為零，因?yàn)槲覀兪褂玫氖?CSS 邊框。

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

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

　　CSS:

　　讓我們?cè)敿?xì)了解一下上面的 CSS。

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

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

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

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

　　CSS 文章標(biāo)題

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

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

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

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

　　CSS:

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

　　間距

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