CSS中的clamp（）是什麼（以及如何使用）

如果您曾經嘗試使您的網站在手機和巨型監視器上看起來都不錯，那麼您已經看到間距斷裂，字體會急劇收縮或過度縮放，並且元素不堪重負或消失。為了解決所有這些問題，您最終會為一個佈局編寫一長串媒體查詢。那就是Clamp（）可以提供幫助的地方。

這是一個簡化設置大小的CSS函數。它不用在固定斷點處定義多個值，而是讓您設置最小值，首选和最大值，以便隨著屏幕的變化而流暢地縮放元素。最好的部分是它們保持在您定義的極限範圍內，因此沒有佈局不一致。

在這篇文章中，我們將解釋Clamp（）的工作原理，為什麼它通常比媒體查詢更有效，以及Divi 5如何讓您在不編寫一行代碼的情況下使用它！

什麼是夾具（）

Clamp（）是CSS中的本機函數，用於定義根據屏幕尺寸調整的響應值。您沒有為單個數字進行硬編碼，而是為瀏覽器提供一個可以使用的範圍 - 您設置了最小值，可擴展的優選值和最大值。這些使您的佈局更加靈活，並且您不必為每個屏幕尺寸編寫多個媒體查詢。

讓我們以一個流體字體大小的示例來理解這一點，該尺寸會根據屏幕尺寸增加/減小。

font-size: clamp(40px, 7vw, 100px);

在這裡，字體尺寸永遠不會低於40px，根據觀看端口寬度的7％進行擴展，並在達到100px時停止增長。

使用Clamp（）的另一個重要好處是，與媒體查詢不同，它可以避免剛性跳躍，並使您的樣式更具可預測性和可讀性。

這是什麼意思？讓我們通過將Clamp（）與媒體查詢進行比較來理解這一點。

比較夾具（）和媒體查詢

媒體查詢是針對不同屏幕寬度調整字體大小的另一種常見方法。在這裡，您可以在特定屏幕寬度上定義斷點，在該屏幕寬度會更改。例如，您可以為台式機分配一個字體大小，另一個用於平板電腦，而移動設備為第三個字體，以使字體大小僅在屏幕寬度達到每個斷點時會發生變化。

這種方法有效，但不是流體。在1000px和501px之間，字體大小保持鎖定為100px。屏幕達到500px的那一刻，字體突然降至30px。這意味著沒有平穩的過渡，只有急劇的變化。

因此，如果您想使縮放感覺更自然，則必須添加幾個斷點並手動調整每個主體尺寸。這將使您的代碼冗長且腫。

相反，clamp（）使您免於突然的過渡和冗長的代碼。實際上，它可以單行寫入：字體大小：夾具（30px，7vw，100px）。

這告訴瀏覽器根據觀看端口寬度的7％擴展30px和100px之間的字體。字體尺寸在所有屏幕尺寸上都可以流暢地調節，而無需突然跳躍或需要多個斷點。您仍然定義限制，但是之間的縮放是自動和更一致的。

在現場動作中，以下是介質查詢斷點的字體調整和clamp（）外觀的字體調整之間的比較：

對於響應式調整，clamp（）帶來了明顯的不同。它沒有等待固定屏幕寬度觸發樣式的變化，而是響應介於兩者之間的每個像素。這樣可以使您的代碼清潔器和設計在所有設備中更加一致。最重要的是，它得到了大多數現代瀏覽器的廣泛支持，這意味著它將在這些瀏覽器上很好地渲染，從而使其成為可靠且實用的替代品。

clamp（）如何在幕後功能

clamp（）採用三個值一起使用以擴展任何CSS屬性的值：

 clamp(minimum, preferred, maximum) 

該功能的每個部分都有特定的作用：

• 最小值：最低值。無論屏幕有多小，元素都不會縮放在此點以下。
• 優選值：此值根據屏幕大小進行量表。通常使用大眾或calc（）表達式以允許自由流動性設置。
• 最大值：允許的最高尺寸。即使在非常大的屏幕上，元素也不會超過此值。

當瀏覽器計算最終大小時，它首先評估首選值。如果屏幕尺寸足夠小，則瀏覽器使用最小值，以至於首選值降至最小值以下。同樣，如果屏幕足夠寬，以至於首選值超過最大值，則粘在其中。

這使得行為可以預測。您總是知道您的設計將保持在定義的範圍內，但是在這些限制之間可以靈活地縮放。通過設置最小和最大限制，Clamp（）可確保您的元素流暢，但絕不超過。就足夠了。

選擇正確的優先價值

您可能已經註意到，首選價值（中間）在所有這些方面都起著更大的作用。它決定元素如何擴展。

首先，它不應該是固定值，例如夾具（40px， 80px ，120px），因為在這種情況下，首選值根本不會擴展。由於80px已經屬於限制之間，因此瀏覽器將其鎖定並忽略屏幕尺寸的變化。這導致靜態值，它首先打敗了使用clamp（）的目的。

相反，首選值應始終是相對的，例如夾具（40px， 7vw ，120px）。在這裡，7VW響應視口的寬度，該元素可以跨屏幕尺寸平穩縮放。然後，夾具功能可確保其永遠不會低於40px或超過120px，從而使尺寸響應於屏幕寬度的7％。

您還需要考慮相對值的大小。例如，較小的值（例如2VW）會更逐漸地跨屏幕尺寸縮放元素，而較大的值（如6VW）會導致更快的縮放率，並更快地達到最大尺寸。要識別哪種縮放為您有效，請嘗試使用流體類型刻度計算器。它使您可以預覽不同的值並導出即可使用的CSS。

注意：流體類型比例計算器輸出VI值。如果您使用Divi中生成的輸出，請確保將VI單元更改為大眾。

夾具（）中的不同類型的單元

夾具（）內部的單元會影響其在設備之間的行為。您可以使用以下所有：

在大多數情況下，開發人員將PX用於最小值和最大值，以及像VW這樣的流體單元作為首選值。這可以在控制和響應能力之間取得最佳平衡。

但是，您也可以使用最小值和最大值的相對單元，例如夾具（2REM，4REM，8REM）。如果根字體尺寸更改，這使您的設計更容易訪問，並且更易於擴展。這對於調整瀏覽器設置以進行可讀性的用戶特別有用。

Divi 5中的夾具（）

CSS中的Clamp（）功能非常有用，但前提是您舒適地編寫代碼。那些喜歡在不觸摸樣式表的情況下視覺構建網站的人呢？您想使用夾具（）而不編寫代碼來構建流體佈局嗎？

如果是這樣，Divi 5的高級單位可以提供幫助。

訂閱我們的YouTube頻道

長話短說，Divi 5支持Clamp（）作為整個構建器的高級單位，並且非常容易訪問它們。無論何處，您都可以輸入數字值，例如字體大小，間距或部分寬度，都可以直接找到使用Clamp（）的選項。

只需單擊輸入字段以從Divi 5中可用的不同高級單元中進行選擇（請參閱標題文本大小旁邊的深色列表） ，更改單位類型，並定義您的最小值，首选和最大值。

就是這樣！根本沒有編碼或CSS - 您所做的只是輸入一個夾具（）值，而您的標題就會像那樣流暢。

Divi 5使得在不編寫自定義CSS的情況下可以輕鬆創建流體，響應式設計。您可以通過視覺編輯器的簡單性獲得夾具（）的所有靈活性。 （Divi 5支持許多其他高級單元，包括夾具（））。

了解有關Divi 5的高級單位的所有信息

如何在Divi 5中使用clamp（）？

到目前為止，您已經看到在Divi 5中使用Clamp（）的容易。您只需選擇clamp（）單元並添加您的首選值即可。沒有自定義代碼，沒有CSS文件，只有一個乾淨的視覺接口。

但是，使Clamp（）真正強大的內部Divi的功能不僅僅是功能本身。這就是它的工作。

Divi 5是圍繞模塊化設計系統構建的。這意味著您可以將clamp（）與其他高級功能（例如設計變量和CSS函數）相結合，例如Calc（）使您的佈局不僅響應迅速，而且可以穩定且易於擴展。這就是它變得有趣的地方 - Divi 5使得將夾具（）易於將其貼合您的工作流程。

夾具（）與設計變量一起使用

在Divi 5中有效使用Clamp（）的最佳，最有效的方法是將其與設計變量相結合。

設計變量可讓您定義全局值（例如版式，顏色甚至字體尺寸），因此您可以在整個網站中使用它們以保持其一致。您還可以將Clamp（）值保存為數量變量。這使您可以節省響應式的全局值，以便在更改它們時，所有實例都會一次更新。

例如，您為H1-H6標題定義夾具（）尺寸：

並將它們保存在Divi Builder中的變量管理器中：

然後，整個網站的所有標題都將根據您定義的夾具（）值調整。

現在，如果您想更新H3大小，只需修改其數字變量，並且在您使用的任何地方都會更新它。 （想要在Divi 5中創建自己的排版系統？這是使用夾具（）和設計變量管理字體和字體尺寸的完整指南。）

這種方法允許集中控制，從而易於在全球更新版式設置，而無需手動調整每個實例。通過通過選項組預設應用這些夾具（）變量，可以簡化設計過程。

clamp（）與calc（）結合

您也可以在clamp（）內使用calc（）函數來微調值的尺度。當您要添加基線大小，然後使用像大眾這樣的相對單元更精確地縮放它時，這一點尤其有用。

例如，字體尺寸：夾具（1REM，CARC（0.75REM + 2VW），2.5REM）使用Calc（）添加穩定的底座（0.75REM），然後用2VW進一步擴展它。

這允許字體根據視口寬度進行擴展，但也使其具有基本字體大小的啟動。這對於在不需要多個夾具變化的情況下保持較小的屏幕上的可讀性很有用。 Clamp（）內部的Calc（）技巧非常適合您想要對事物規模擴展的額外控制的任何地方。

夾具的實際用例（）

現在，讓我們看一下一些常見的用例（）的常見用例，以及使用Divi 5：

1。所有設備的一致標題尺寸

響應式排版是夾具（）的最佳用例。由於我們已經在設計變量中使用clamp（）定義了標題（H1-H6）尺寸，因此是時候看到它們在行動了。

我們使用菜單項的H5S創建了此頁面。然後，我們將H5數字變量應用於H5的每個標題文本大小。如您所見，每個標題都會在斷點上縮放。

文本在我們所有定義的響應性斷點中保持清晰，平衡和視覺上一致。

您也可以將clamp（）用於線高和字母間距。隨著屏幕變得更寬，它通過略有增加的線路間隙或間距有助於保持最佳的可讀性。一個很小的變化，但它會使長形式的內容感覺更加透氣。

2。在大屏幕上的段落部分設置夾具（）寬度

段落自然很容易在移動設備上閱讀，因為緊湊的屏幕中的短行使內容可消化。但是，在超寬的監視器上，如果全寬部分將文本延伸得太遠，讀者將被迫掃描整個水平行。感覺就像讀廣告牌。句子的理想線長度約為50-75個字符，因此，如果您的網站在寬屏幕上顯示一個無盡的句子，則可能會失去讀者的興趣。

要解決此問題，請設置一個響應寬度，例如夾具（300px，65VW，800px），以將段落擴展到固定寬度（800px），以便在較寬的屏幕上也可以閱讀段落。

這是使您的博客文章在更廣泛的屏幕上可讀的完美方法。

3。單個或特色圖像的設置夾具（）寬度

同樣，在超寬屏幕上，單個圖像（如特色圖像）可能看起來太大。它在平板電腦上看起來很完美，但在4K顯示器上可能會尷尬地伸展，與其他內容相比，它會感到壓倒性。

要解決此問題，請使用基於夾具的圖像寬度，例如夾具（300px，60VW，1000px）。它確保圖像隨屏幕尺寸而流暢地生長，但在其主導佈局之前停止。

否則，您只需為整個容器行設置一個夾具（）寬度，以確保所有元素（圖像，標題和文本）均勻擴展。

4。用夾具添加流體填充和邊距（）

設計師通常會獲得台式機的間距，但在較小或非常大的屏幕上並不總是很好地工作。固定的填充物和邊距並不總是隨屏幕尺寸調整。那就是clamp（）有用的地方。

例如，在圖像庫中的夾具（0.5REM，2VW，2REM）邊緣和一個夾具（1REM，3VW，4REM）填充板創建的空間會創建小的空間，從而從屏幕上縮小並縮放。

它為您的佈局空間提供了大屏幕上的呼吸，並使手機上的操作緊繃：

Clamp（）還有助於在卡片佈局，圖像庫，部分容器和文本塊上平穩地填充填充，尤其是當您想要故意間距而無需持續斷點調整時。

5。創建反應敏感的英雄部分，無縫擴展

使用Clamp（），您可以通過定義英雄標題，按鈕填充和字幕間距使英雄部分在每個屏幕上看起來都很完美。我們將這些夾具（）值保存為設計變量，以簡化其應用程序。 （但是您不想通過節省每一分鐘的細節來填寫變量管理器。）

現在應用這些值很容易。

保存後，每個設備都會自動適應屏幕尺寸，以使您的英雄部分在每個設備上都有完美的第一印象。

使用夾具（）設計像素完美的佈局，而無需編寫一行代碼

Clamp（）可幫助您設計流體，響應式佈局，而無需依賴無盡的媒體查詢。使用Divi 5，您無需編寫單行代碼即可使用它。無論您喜歡編碼還是享受視覺設計，Divi的高級單元都可以使夾​​具（）在字體上塗抹和間距更容易。

有了諸如Clamp（）之類的強大功能，因此您不想自己嘗試Divi 5嗎？測試不同的值，創建自己的響應式系統，並查看佈局的靈活性。當您擁有喜歡的夾具（）技巧時，請在下面的評論中分享！我們很想看看您創造的東西。