了解CSS單元（以及如何使用它們）

您可能以前可能在Web代碼中看到過各種CSS單元，但是了解它們的工作方式使您可以更故意使用它們。在這篇文章中，您將了解CSS單元的確是什麼，它們如何影響您的佈局以及如何在Divi 5中使用它們，可以幫助您更響應地設計。

Divi 5將本地對CSS單位的支持就直接進入建築商。多虧了新的高級單元功能，您無需自定義代碼即可使用％，EM，REM，VW等。

什麼是CSS單元？

CSS單元告訴瀏覽器應該有多大或小的東西。無論您是設置標題的大小，部分的寬度還是元素之間的間距，您都使用單元來定義該空間。沒有它們，瀏覽器就不知道該如何處理您的價值觀。

例如，寫作寬度：100對瀏覽器沒有任何意義。但是，添加一個單元，例如100px或100％，現在它確切知道您想要什麼。

以四個框以此示例為例，每個框都使用不同的CSS值：

• 第一個使用寬度：100。技術上無效，但許多瀏覽器將其呈現為100％。
• 第二個（100px）使用固定寬度。
• 相對於母容器，第三和第四（100％和60％）比例比例。

您可能會想知道為什麼第一個具有寬度的盒子：100在技術上無效，即使它仍然出現全寬。

寬度：100被瀏覽器忽略，因為它缺少單元。但是在這種情況下，盒子仍然在容器上伸展，不是因為CSS被接受，而是因為像Div這樣的塊級元素默認情況下自然地跨越了父母的整個寬度。這是默認行為的巧合，而不是無效CSS被解釋為100％的結果。

流行的CSS單元

儘管PX和％通常出現，但一旦您知道何時使用它們，許多其他人同樣有用：

從設置字體尺寸，定義截面寬度，調整填充和邊距以及構建靈活的網格佈局，您將在Web設計中看到這些單元。它們是佈局外觀和行為方式上最重要的決定因素之一。在使用哪些單元在有效設計中更重要的地方，我們將盡快完成。

但是首先，知道所有CSS單元都屬於兩種主要類型是有幫助的：絕對和相對。

絕對和相對單位

如果您希望佈局在不同的屏幕尺寸上良好工作，那麼了解差異至關重要。

絕對單位

絕對單位具有固定值。這意味著，當您將某些東西設置為100px時，無論用戶在手機，平板電腦還是大型桌面顯示器上，它始終將寬100像素。這些單元無法響應屏幕尺寸或周圍佈局，這使得它們在需要精確控制時很棒。

它們通常用於邊界，圖標尺寸或固定的盒子陰影，通常在精確度更重要的情況下比靈活性更重要。

但是同樣的精度可能會引起問題。在大屏幕上看起來很完美的設計可能會溢出，笨拙或在較小的設備上完全斷裂。由於絕對單位無法適應，除非仔細使用，否則它們可以使您的佈局感覺僵硬。

相對單位

顧名思義，這些基於周圍環境進行調整。它們沒有將鎖定到特定的尺寸，而是根據上下文（父元素，視口等）進行擴展。這使它們更加靈活地進行響應設計。

一些單元響應父元素的大小，而另一些單位則對頁面的根字體大小響應，有些甚至對瀏覽器窗口本身反應。這是一些關鍵的：

• ％用父容器縮放。
• EM根據父元素的字體大小進行調整。
• REM遵循頁面的根字體大小。
• 大眾和VH響應瀏覽器視口的寬度和高度。

由於它們適應了不同的環境，因此這些單元可幫助您構建在任何屏幕上感覺自然的佈局。它們會隨著給出的空間擴展或縮小，這使您的內容可讀，並且您的設計在跨設備之間保持平衡。

讓我們看一個快速的例子，看看為什麼這種靈活性很重要。假設您正在構建圖像部分，並將其寬度設置為1200px。

這在大型顯示器上看起來可能是完美的，但是在屏幕寬度為768像素的平板電腦上，圖像可能會溢出並看起來很奇怪。現在嘗試使用：

width: 100%;

這告訴瀏覽器使圖像填充其容器的寬度。屏幕是寬還是狹窄，圖像會自動調整。

使用相對單元的真正好處是響應能力。您不僅要分配一個尺寸，而且還為瀏覽器提供了有關佈局在不同情況下應如何行為的明確說明。而且，當您正確處理時，您的內容適合每個屏幕。

通過使用有意義的相對單元，您可以避免使用嚴格的佈局，減少斷點的需求，並使設計更易於管理。使用Divi，您不必編寫單行代碼來使用不同的CSS單元。在構建器中選擇您想要的單元，然後查看您的佈局實時響應。

何時使用CSS單元

現在，您了解了絕對單位和相對單位之間的區別，下一步是知道何時使用每個。

通常，當您的佈局需要適應不同的屏幕尺寸時，請使用相對單元。這些非常適合截面寬度，版式，元素之間的間距或整頁佈局。因為它們會自動擴展，所以它們可以幫助您保持一致性，而無需為每個設備創建單獨的樣式。

另一方面，當您希望某些東西保持不變時，絕對單位將會有所幫助。想想邊界，圖標，固定間距或小視覺細節。

這裡有一些指導您選擇的示例：

• 當您需要精確控制時，請使用PX，例如圖標尺寸。由於它沒有適應，因此請避免使用佈局寬度或文本。
• 當您希望元素與其容器擴展時，請使用％。
• 當您希望間距與父元素的字體大小擴展時，請使用EM。
• 如果您想在網站上進行一致的尺寸，請使用REM （通常稱為root em） 。由於它基於根字體的大小，因此可以保持間距和排版可預測。
• 使用大眾和VH進行全屏部分，英雄區域或直接響應視口的間距（設備屏幕的整個視圖）。

對於更高級的控制，您還可以使用CSS功能組合單元。當混合1REM + 5VW之類的值以最小基礎響應間距等值時，Calc（）很方便。 Clamp（）是設置在極限之間生長或收縮的流體值的理想選擇，使其成為媒體查詢的更乾淨的替代品。

最後，選擇合適的單元涉及考慮每個元素在不同情況下應如何行為並選擇最能實現這一目標的單元。

Divi的高級單位，無需編碼即可構建響應性

我們已經看到了CSS單元如何控制佈局行為。 Divi 5採用該控制權，並毫不費力地與高級單位一起使用。

訂閱我們的YouTube頻道

有了直接在構建器中構建的對％，EM，REM，VW和VH的本機支持，您可以將實際CSS值應用於模塊，部分，間距和排版，而無需打開代碼面板。在任何數值字段中，只需從高級單元下拉列表中選擇您的首選單元，調整值，然後查看更改。

而且它不止於此。 Divi還允許您在Visual Builder中使用Calc（）和Clamp（）等高級CSS函數。這意味著您可以創建具有相同精度開發人員的流體值，混合單元和微調佈局，但在視覺上可以從手寫的CSS中獲得。

需要一個字體尺寸，以在不同的屏幕尺寸上流暢地縮放？使用夾具（）。是否想用固定和柔性值的混合物來抵消間距？嘗試calc（）。 Divi立即明顯地處理所有操作。

您不再猜測或在設計和代碼之間進行切換。 Divi為您提供了視覺能力和即時反饋，以使響應邏輯正確，並完全控制您的元素如何擴展和跨設備的表現。

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

CSS單元與Divi的高級工作流程完美同步

您已經看到Divi如何在建設者內部輕鬆使用單個CSS單元。但是，真正的優勢表明，這些單元何時在整個網站上一起工作。這就是設計變量，選項組預設以及高級CSS功能之類的功能，例如Calc（）和Clamp（）確實發光。

Divi不僅讓您將CSS單元輸入到字段中。它可以幫助您在不編寫代碼的情況下將它們集成到整個設計系統中。一切都保持一致，可擴展且易於維護。

讓我們看看Divi如何幫助您使用CSS單元作為靈活的，邏輯驅動的工作流程的一部分：

1。使用設計變量創建佈局邏輯

節省任何項目時間的最簡單方法之一是預先計劃您的佈局邏輯。您沒有在多個位置調整相同的間距或字體大小，而是使用Divi的設計變量來定義這些值並在整個設計中重複使用。

您可以使用2REM，5VW或什至諸如calc（2REM + 1VW）之類的真實CSS單元（例如2REM，5VW），創建可重複使用的值，例如–Card-Padding或–section-GAP。設置後，這些值可以在模塊，行和各節上應用，以保持所有內容一致。

您只需要在以後更改時更新變量。這種變化反映了所使用的任何地方，可以為您節省尋找各個設置的來回。而且，由於CSS單元是直接構建到Divi系統中的，因此您不依賴猜測，而是在視覺上應用真實的CSS邏輯。這使您的佈局更易於管理，可擴展和易於調整，隨著項目的增長。

2。在視覺上使用clamp（）和calc（）

CSS功能諸如Clamp（）和Calc（）之類的功能可幫助您構建響應式佈局。它們讓您定義靈活值，這些值在跨屏幕尺寸的情況下調整了媒體查詢。因此，您可以編寫像夾具（1REM，2VW，2.5REM）一樣編寫邏輯的固定尺寸，以使瀏覽器在設定限制之間平穩縮放。或使用計算（100VH - 80px）根據您的視口高度調整英雄部分。

通常，他們需要手動編寫CSS。在Divi中，您可以直接輸入任何數字字段。

而且，由於CSS單元在兩個功能中都受到支持，因此您可以混合REM，VW和PX等值以獲得所需的行為。您會在鍵入時看到結果實現，這使得可以輕鬆進行實驗和響應能力，而無需離開構建器。

3。保存單位邏輯，並帶有選項組預設

使用高級單元或公式設置佈局後，您就不必再次重建它們。 Divi允許您保存樣式邏輯，包括填充：夾具（1REM，3VW，2REM）作為選項組預設。

這意味著下次您需要相同的間距或佈局模式時，您不應用相同的設置，而僅應用保存的預設。

而且，如果您使用預設內部的設計變量，那就更好了。您可以輕鬆地創建一個相互聯繫的系統，其中修改整個網站的樣式僅取決於一件事：更改變量。

在Divi中，使用CSS單元不僅僅是大小；這是關於行為的。您設置的每個值都成為可視化，縮放和在佈局中保持一致的視覺系統的一部分。而且由於所有這些都內置在構建器中，所以感覺不像編碼，而是使用邏輯設計。

Divi將CSS單元變成視覺超級大國

您無需編寫CSS即可使用CSS單元。 Divi 5將它們全部帶入了一個視覺界面，您可以在其中實時探索，應用和預覽。無論您是調整間距，構建流體排版還是使用變量和預設創建佈局邏輯，Divi都可以在視覺上完成所有操作。

準備嘗試了嗎？下載Divi 5並開始在設計中使用真實的CSS單元。