在Divi 5中使用Min（）和Max（）創建智能佈局

CSS Min（）和Max（）在響應式Web設計中是兩個通用的功能，但Divi 5自從高級單元更新以來對這兩者都有全部支持。雖然我們以前曾使用clamp（）和Calc（），min（）和max（）的動態計算探索流體版式，並為您提供更簡單的方法來實現響應式設計。

在這篇文章中，我們將向您展示如何使用Divi使用這些功能（Divi 5已準備好在新網站上使用，並建議即將推出現有網站的遷移）。您可以採取的措施使用響應功能可以減少您對媒體查詢的依賴，CSS是一件美麗的事情！

CSS Min（）和Max（）：具有更簡單邏輯的智能佈局

如果您已經探索過clamp（），那麼您是Mastering Min（）和Max（）的一半！如果您還記得，clamp（）同時使用三個值（min，preferred和max），clamp（）中的min和max是相同的概念，但在給定時間只有1/3的邏輯。

min（）和max（）做什麼？

min（）和max（）函數可讓您設置兩個或多個值，該值最小（最小）或最大一個（最大）基於屏幕尺寸。

“過渡點”由您設置的兩個值確定，因此僅用於可視化目的

min（）：始終選擇較小的價值

使用min（）防止寬屏幕過度拉伸內容。這是在大屏幕上不應該在大屏幕上增長的佈局的理想選擇，但隨著屏幕尺寸變小，應該具有足夠的靈活性來向下擴展。

 width: min(100%, 500px); 

在此示例中，該元素的寬度將永遠不會超過500px，但是如果該元素不到500px標記，則將100％。

max（）：始終選擇更大的價值

使用Max（）防止內容變得太狹窄或太小，尤其是在較小的屏幕上，或者當內容需要最小尺寸才能保持清晰或功能時。這對於不應該在小屏幕上的某個點（固定值）上縮小的佈局是理想的選擇，但可以擴展以適應較大的空間（具有相對值）。

 width: max(80%, 300px); 

在此示例中，該元素的寬度將始終是更大的選項：其80％的容器或300px。在較小的屏幕或緊密的容器中，如果80％計算至300px，則該元素的寬度至少為300px。在較大的屏幕上，該元素將擴展到容器寬度的80％，但切勿縮小到300px以下。這種方法有助於確保該元素可在小屏幕上保留，同時對較大的元素進行響應縮放。

為什麼將相對和固定值組合在min（）和max（）中？

當您第一次在CSS中遇到Min（）或Max（）時，您可能會想知道為什麼它們經常結合一個百分比和像素之類的值。那是因為每種單元類型在響應設計中起著不同的作用。

例如，最小（100px，200px）將始終解析為100px。它只是選擇兩個固定值中的最小。但是，當您混合單位（例如Min（100％，500px））時，您會告訴瀏覽器：“使用父母寬度和500px的100％之間的使用。”這使它響應迅速。

類似於％，大眾和EM之類的相對單元根據上下文進行調整 - 無論是父元素，視口還是繼承的字體大小。固定單位（如PX）在CSS中保持恆定，使其可預測。

通過組合固定和相對值，Min（）和Max（）可讓您構建適應尺寸邊界的靈活設計。

如何將min（）和max（）與divi使用

現在，我們已經介紹了Min（）和Max（）的基礎知識，讓我們討論一些示例。

1。響應性行寬度較少

您始終能夠在帶有Divi的容器元素上設置寬度和最大寬度。但是，通過打開CSS功能，例如Min（）和Max（），您可以執行相同的操作，但使用一個較少的設計字段（並且在頁面上也少輸出CSS）。

在Divi中，如果您轉到一個元素（在我們的情況下是一行）， “設計”選項卡，然後進行尺寸，您會找到一些調整寬度的選項。通過使寬度為95％並將最大寬度設置為900px，您可以在移動設備上看起來不錯，但也可以為您提供一個佈局，並在左右右側帶有許多負空間以顯示桌面顯示。

這就像將這樣的CSS用於行：

 .container {
width: 95%;
max-width: 900px;
} 

使用Divi 5的高級單元，您現在還有另一個更合併的選項。您只能在寬度範圍內輸入所有所需的一切，並達到相同的結果。

這就像在行容器上使用此CSS一樣：

 .container {
width: min(95%, 900px);
} 

這是CSS與兩行的一行。更重要的是，每當您使用min（）而不是設置寬度和最大寬度時，它需要較小的步驟和價值。任何一個選項都取得了與本視頻相同的結果：

這種特殊的用例並不是那麼令人興奮，但是它確實顯示了Min（）和Max（）的功能，以及如何替代較舊的CSS聲明。

當使用min（）或max（）進行間距，大小或邊界（可以在Divi 5中的更多字段中使用），我強烈建議您將它們設置在選項組預設或元素預設中。這樣，無論您在何處使用它們，都可以保持一致的縮放。

2。行填充和邊界寬度

在下面，我的設計需要更大的內部填充和更大的邊框寬度，因為屏幕尺寸變大。為了適應此功能，我使用Max（）函數將右/左/底部/底部邊框寬度和行填充設置。 CSS將是這樣的：

 .container {
padding: max(10px, 2vw) max(10px, 2vw) max(10px, 2vw) max(10px, 2vw);
border-width: max(5px, 1vw) max(5px, 1vw) max(5px, 1vw) max(5px, 1vw);
} 

這意味著Max（）函數將在所應用的任何情況下都選擇更大的。兩側最小的填充物為10px，最大的填充物為2VW。同樣，對於邊框寬度，它最小的是5px，最大的是1VW）。

這是在這種情況下的Max（）在設計>間距> Divi中的填充物中的樣子：

這是在這種情況下的Max（）在設計> Border> Divi中的邊界寬度中的樣子：

我在一起的效果是，在行內部的填充量較小，並且在較小的屏幕上的邊界寬度更薄。但是，隨著屏幕尺寸變大，大眾值（請記住，它是相對值）變得比固定像素值大。

這有助於最大程度地利用較小的屏幕，而更寬的屏幕可以更多地填充空間。

3。全高英雄部分

使用部分高度上的Min（）值，您可以使用簡單的Min（）函數創建至少一定高度的英雄部分，否則可以適合全屏高度的90％（不再）。

 height: min(800px, 90vh) 

除了在較大（更高）的屏幕上，它的效果是擁有一個全高英雄部分，然後將顯示下面的下一部分。在Divi尺寸設置中，可以使用兩個不同的字段輸入（寬度和最大寬度）來完成，但是使用Min（）函數，我們只能使用尺寸中的一個字段獲得相同的效果。

對於大多數屏幕尺寸而言，它將英雄部分作為主要的部分，但在屏幕較高的屏幕分辨率的少數情況下不會變得太大。

4。字體尺寸

使用Min或Max用於字體尺寸可以幫助您實現比靜態像素值更具動態尺寸。為此，您需要使用Max（）根據屏幕尺寸條件來擴展字體大小。將像素/REM值設置為要使用的絕對大小，並使用相對值向上擴展。

1REM等於根字體大小（除非在您的網站樣式中自定義，否則通常是16px）；最大的字體尺寸（1REM，2VW）將佔兩個值中的較大，並且永遠不會小於16px。

如您所見，在最小的設備上，字體尺寸設置為1REM/16px。在某個時刻，較大的值變為2VW，並將字體尺寸向上縮放，隨著屏幕尺寸變大，字體更大。

對於字體尺寸，我不建議使用min或max，而是建議使用夾具（）。最小/最大隻能在一個方向上提供動態縮放，並且要接近Clamp（）的效果，您需要將最小/最大字體尺寸規則設置為多個斷點（這可能是可能的，但更容易使用夾具）。

min（）/max（）和clamp（）之間的差異

您可以將Clamp（）理解為Min（）和Max（）的組合，並在兩者之間具有首選值。 clamp（）為最小蓋子的一個值，一個值作為最大蓋，一個值（中間）作為確定最小和最大之間變化斜率的首選值。

一個例子：

 font-size: clamp(16px, 4vw, 40px); 

這意味著您設置的字體尺寸永遠不會小於16px或大於40px。但是，它更改的速率（基於屏幕尺寸）取決於中心中的首選值。

閱讀我有關使用clamp（）的專門文章，以查看我喜歡的流體版式發電機，該發電機為您創建clamp（）函數。

嘗試使用Divi 5的Min（）和Max（）

min（）和max（）可能不像clamp（）或calc（）那樣受到關注，但它們是Divi 5中更智能，更簡單，更清潔的響應設計的必不可少的工具。

這些CSS功能為您提供了控製網站響應能力的獨特方法。一旦了解了何時使用min（）和max（），您將想知道沒有它們的響應式設計如何管理。它們在現代瀏覽器中得到了充分的支持，Divi使它們直接實施。 Divi 5已準備好在新網站上使用。