在本文中，我將探討一些比較函數(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 來實現(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)容實際上被包裝并與下面的內(nèi)容對齊。
為此，我們需要一種在 CSS 中使用以下公式的方法：
感謝 CSS max() 函數(shù)，我們可以添加最小填充，以及在需要時切換到動態(tài)填充的方法。
CSS:
這個想法是我們需要最小填充為 1rem，然后，它將根據(jù)視口寬度動態(tài)變化。
間距
有時，我們可能需要根據(jù)視口寬度更改組件或網(wǎng)格的間距。不帶 CSS 比較功能!我們只需要設(shè)置一次。
京公網(wǎng)安備 11010802030320號