關於Divi 5的高級單位，您需要了解的一切

出色的設計工具可以控製網站的各個方面。無論是釘完美的填充物還是確保文本在設備之間完美縮放，每個細節都很重要。 Divi多年來一直是設計師的可信賴伴侶，為建立專業網站提供了堅實的基礎。 Divi 5將其進一步推出，引入了一個稱為高級單元的功能。

Divi 5中的高級單位有助於改善您構建網站的方式。從Calc（）的動態計算到Clamp（）的流體縮放，例如大眾和REM等CSS單元，以及CSS變量的靈活性。在這篇文章中，我們將深入研究高級單元，如何在視覺構建器中使用它們，以及為什麼每個Divi用戶都需要它們。無論您是微調佈局還是夢想大膽的新設計，高級單元都可以更好地控制設計的響應能力。

讓我們潛水。

Divi 5中的高級單位是什麼？

Divi 5中的高級單元可以通過其多功能單元字段來控制設計元素。這是一個功能強大的輸入字段，可以接受CSS單元，函數和變量的完整範圍。

視覺構建器的一個很小的變化，它支持所有CSS單元，並為適合容器，unset，calc（），clamp（）和CSS變量提供新的支持。

高級單位使您擺脫靜態值的約束。您不必猜測固定的像素尺寸或與斷點搏鬥的固定大小，以使事情像您想要的那樣適合。在不留下視覺構建器的情況下，您可以構建毫不費力地彎曲和擴展的佈局 - 具有流體排版，自適應間距和視口意見設計。這不僅僅是更多選擇；這是關於更智能，更可擴展的創造力。

探索Divi 5中的高級單位

Divi 5的高級單元功能提供了各種設計選項，每種選擇都有獨特的形式佈局。讓我們檢查關鍵參與者，看看他們的工作方式。

Divi 5中的CSS單位

高級單元打開了CSS單元的完整調色板，遠遠超出了像素和百分比。以視口寬度（大眾）為例 - 將部分的寬度設置為80VW ，它將始終佔用視口寬度的80％（水平水平），從台式機到移動設備完美縮放。

root em（rem）與站點的根字體大小的尺寸 - 用於一致版式的想法，例如標題的4.5REM 。

您也可以嘗試使用Fit-Content，該擬合體根據其內容大小。例如，使用fit-content進行標頭寬度可以確保其完美適應。您可以連續添加適合寬度範圍，以保持標頭緊湊和成比例，避免過多的空間或溢出，同時保持拋光外觀。

這些單元適應屏幕尺寸和上下文，給出了感覺活著而不是鎖定到位的佈局。

calc（）是動態計算器

CACL（）函數就像是內置在Divi中的迷你計算器。它使您可以將單位與操作（加法，減法，乘法和除法）混合，以獲得動態結果。一個經典的例子是計算（100％ - 50px） ，它將部分的寬度設置為100％，並減去50像素。如果您的元素被集中對齊，則兩側的25px將減少。

您可以使用calc（）進行響應的間距，例如設置部分或行的寬度在每一側都留下完美的溝槽。 Calc（）隨著視口的變化而即時進行調整，確保您的設計保持平衡而無需進行手動調整。

用於流體控制的夾具（）

Clamp（）函數可幫助您控制尺寸，這些尺寸可以跨屏幕尺寸平穩調整。它使用三個值：最小尺寸，首選尺寸和最大尺寸。一個很好的例子是夾具（36px，4vw，48px） 。

這意味著尺寸始於36px，基於4％的視口寬度增加，但從未超過48px。它非常適合文本，就像一個標題模塊，在小型手機和大屏幕上看起來都不錯。無論設備如何，Clamp（）確保您的設計保持平衡且可讀。

CSS變量用於全球靈活性

CSS變量（或自定義屬性）讓您定義可重複使用的值，例如–font-size：5em ，在Divi的主題選項或頁面設置CSS字段中。在Divi 5中添加CSS變量時，請確保將它們包裝在父母元素中：

:root {
--font-size:5em;
}

定義後，您可以將var（–font-size）放入標題的文本大小字段中以應用它。

這是一個節省時間，可以使您的設計一致且可以隨時進行。

無單位值

Divi 5的高級單元還包括初始，Unsot和自動值。初始屬性將CSS屬性重置為CSS規範定義的默認值。例如，設置顏色：段落上的初始內容將其恢復為黑色，忽略任何自定義或繼承的樣式。未設置將屬性清除回到其自然狀態，其作用類似於非屬性屬性的初始狀態，或在適用時恢復為繼承的值。同時， Auto可以讓瀏覽器根據上下文決定一個值，例如部分的高度伸展以適合其內容。

高級單位在Divi 5中的工作方式

Divi 5中的高級單元將新的控制水平直接帶入了視覺構建器，從而易於創建響應迅速的動態設計。您可以立即輸入任何CSS單元，功能或變量（例如VW，Calc（）或Clamp（）），並查看結果。這是高級單位在Divi中的工作方式。

calc（）的響應式部分寬度

假設您想要一個佔用視口高80％的部分，但可以從頂部和底部刪除一些填充物。導航到該部分的設計選項卡，找到高度字段，然後將Calc（80VH - 60px）添加到該字段中。

該計算允許該部分用視口加流暢，從而維持觀看端口高度的80％，同時從頂部和底部減去30px。

用夾具（）的流體版式

如果您需要隨屏幕尺寸但可讀的標題，Clamp（）可能會很有用。在標題模塊的設計選項卡中，將標題文本大小設置為夾具（52px，2vw，36px） 。

這將文本設置為52px，根據2％的視口寬度來擴展，並將大小限制為36px - 毫不費力地提供了響應良好的平衡版式。

可變驅動的字體大小

Divi 5的CSS變量是在間距，文本和其他領域獲得統一性的好方法。您可以將變量設置一次，然後通過將它們添加到模塊，列，行或部分單位字段中，在整個設計中重複使用它們。例如，假設您需要一致的標題大小，而無需手動設置它們或使用選項組預設來定義它們。

您可以在主題選項或頁面設置中添加以下內容，在高級>自定義CSS下：

:root{
--text-size-h1: 86px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 36px;
--text-size-h5: 28px;
--text-size-h6: 20px;
}

從那裡，只需在任何標題模塊中的標題文本大小添加一個變量即可。例如，對於我們的英雄部分，我們只需添加var（–text-size-h1）即可。 Divi將其識別為變量，並將適當的樣式分配給您的標題。

高級單位的最佳實踐

為了充分利用Divi 5中的高級單位，周到的方法可以節省時間並確保您的設計閃耀。以下是一些指導您的最佳實踐：

啟動簡單

如果您不熟悉CSS功能和變量，請輕鬆使用像素（PX）或百分比（％）等熟悉的單元，然後嘗試Calc（）進行基本動態調整。例如，在潛入夾具（）或CSS變量之前，請嘗試calc（100％ - 40px）的截面寬度。這會建立信心，而不會儘早壓倒您。

利用常見樣式的變量

在主題選項中定義CSS變量，以確定網站範圍的一致性。例如，設置–gutter：30px使您可以在各節，行和模塊之間重複使用該間距。 CSS變量也可以為所有標題設置均勻的文本大小。一項編輯更新了所有內容，加快了設計過程並保持設計凝聚力。

測試響應能力

Divi的響應視圖系統是跨多個屏幕尺寸設計設計的好方法。在應用大眾或夾具（）之類的單元之後，在台式機，平板電腦和移動視圖之間切換，以確保您的佈局順利進行。夾具（20px，3vw，40px）的標題可能在台式機上看起來很完美，但可能需要對較小的屏幕進行調整，因此請確保它進行測試。

不要太複雜

儘管您可以嵌套功能，例如Calc（夾具（20px，5vw，50px） - 10px），但至少在學習時，您應該堅持簡單的公式。過度的複雜性可以減慢性能，並在事情不像應有的情況下更加嚴重地進行故障排除。堅持清潔，有目的的計算，以使生活更輕鬆。

為什麼高級單位提升Divi 5

高級單元非常適合簡化設計過程。這是此新功能帶來的一些關鍵優勢：

• Creative Freedom：混合單元，功能和變量解鎖佈局，這些佈局更加耗時，可以在以前的Divi版本中實現。簡單的公式使您可以調整高度，寬度，字體尺寸等。這種靈活性使您可以在視覺構建器中更快地構建和更快地執行。
• 更好的響應式設計：高級單元將Divi轉向毫不費力地適應的流體設計。使用大眾或夾具（）可確保您的網站在任何設備上都具有自然的感覺，從而減少了手動覆蓋的需求並提供精美的體驗。
• 它是防前的：高級單元與Divi 5的使命保持現代化的視覺構建器的使命。通過擁抱CSS的全部力量，Divi 5可以為您提供建立現代網站所需的工具。這不僅是要跟上；這是要使用反映專業開發人員使用的工具來保持領先地位。

下載最新的Divi 5 Alpha

高級單元是一個有用的功能，最近已添加到Divi 5。無論您是使用Divi多年還是剛剛發現它，都可以減少努力構建響應迅速的動態網站。

準備自己看嗎？立即下載Divi 5 Alpha，然後開始嘗試高級單元。使用大眾和VH進行視口間距，測試夾具（）以進行排版，或設置變量以重新考慮您的構建方式。這是一個進一步推動設計並發現可能的機會。