絕對和相對CSS單元之間的區別

選擇合適的CSS單元不僅僅是技術細節。這就是幫助您的設計在所有設備上保持一致，靈活和響應迅速的原因。像素似乎是一個簡單的選擇，但是它們在不同的屏幕上並不總是可以預見的。

在這篇文章中，我們將解釋絕對單位和相對單位之間的區別，並展示Divi 5從一開始就可以更有效地使用它們。

CSS單元解釋了：為什麼它們對您的網站很重要？

CSS單元控製網站上所有內容的大小。選擇錯誤，您的設計在不同的設備上斷開。

大多數人使用像素是因為它們很簡單且易於理解。但是像素自然不能很好地適應響應式設計。他們需要媒體查詢或CSS功能（例如Clamp（））來響應屏幕更改。

其他單位會自動調整。視口單元用瀏覽器窗口擴展。像EM大小這樣的相對單元基於周圍的文本。不同的單位解決了不同的問題。選擇好，您的設計在沒有額外工作的情況下適應各種設備。

分解絕對單元：當固定尺寸效果最好時

絕對單位保持相同的大小，無論周圍發生什麼情況。如果將某些東西設置為20像素寬，無論有人在手機上查看還是大量的桌面顯示器，它都保持20像素。該值永遠不會根據屏幕大小，父元素或瀏覽器設置而更改。

像素（PX）統治這個空間。存在其他絕對單元，例如厘米，毫米和英寸，但它們屬於物理測量很重要的印刷設計。對於Web設計，像素幾乎可以處理您需要的所有絕對測量。

為什麼像素可以很好地用於小細節

一些設計元素需要精確控制。 1像素邊框應在任何地方看起來清脆且稀薄。掉落的陰影需要精度才能正確。當小圖標在設備之間保持一致時，它們會更好。

像素在這些微小的細節方面非常出色。您的按鈕邊框應精確2像素厚，微妙的陰影應該正好是4像素偏移，並且導航圖標應恰好是24像素正方形，以便完美對齊。

這些測量不需要隨屏幕尺寸擴展。桌面上的1像素的邊框應在移動設備上保持1像素。使其在移動設備上的2像素看起來又厚又笨拙。

其他元素也可以與像素合作。品牌徽標通常使用像素來獲得品牌一致性。小型裝飾元素（例如點或線條）需要精確尺寸。加載旋轉器和進度條可以在固定尺寸上更好地工作。

使像素響應媒體查詢

像素不是完全剛性的。媒體查詢可讓您在各種屏幕尺寸上交換不同的像素值。您的標題可能會在桌面上使用32像素文本，然後在平板電腦上跳至28像素，手機上的24個像素。

這種方法比相對單位多得多。您需要定義斷點並為每個屏幕大小編寫單獨的規則，但是您可以完全控制每個尺寸的外觀。

當您希望在每個屏幕尺寸下進行特定控件時，此方法效果很好。您可以準確地確定在手機上與平板電腦相對於桌面的文字在特定維度上的外觀。不足為奇。

對於需要精確尺寸的元素來說，額外的CSS值得。當徽標適合每個設備的尺寸完全合適時，它們看起來最好。導航元素通常需要特定的維度才能正常工作。裝飾邊界和陰影取決於確切的測量值，以使其看起來清脆。

了解相對單元：靈活的網頁設計方法

相反，相對單元根據周圍的東西伸展和收縮。這種靈活性使網站跨手機，平板電腦和計算機不破壞。與保持固定的絕對單元不同，相對單元適合屏幕尺寸，父元素或用戶偏好。

這些單元解決了像素引起的問題。您的75像素範圍的按鈕在桌面上正常工作，但在移動設備上占主導地位。相對單位會自動調整，從而使您無法為每個屏幕尺寸編寫單獨的樣式。

EM單位如何相互構建

EM單位相對於其直接父元素的字體大小。如果您的基本字體尺寸為16px，並且將容器設置為字體大小：1.25EM，則將變為20px。它內部設置為1.5em的子元素現在將為30px（1.5×20px），而不是24px，因為它基於父，而不是root。

這種複合效果對於圍繞文本的可擴展間距具有強大的功能。但是，如果您保持具有基於EM的字體大小的嵌套元素，則您的值可以迅速增加。 EM單元最適合與附近文本緊密綁定的填充，邊距或元素。要在整個佈局中進行一致的尺寸，請考慮使用REM。

REM單元保持簡單

REM總是查看根HTML元素。將某些內容設置為2REM，並且頁面上到處都是相同的大小。

大多數瀏覽器默認為16px。因此，1REM = 16px，2REM = 32px。更改根大小，並將所有基於REM的秤一起使用。

視口單元跟隨您的屏幕

視口單元用瀏覽器窗口擴展。 50VW =屏幕寬度的一半，100VH =全屏高度。這非常適合填充屏幕的英雄部分。

移動瀏覽器通常在視口單元方面表現不佳。地址欄隱藏並顯示何時滾動，當地址欄出現時，您的100VH部分可能會被切斷。

VMIN和VMAX比較屏幕的寬度和高度，然後選擇一個。 Vmin使用以較小的方式使用。在直立的手機上，寬度較小，因此50Vmin =寬度的50％。旋轉到景觀，高度變小，因此50Vmin切換到高度的50％。 Vmax做的相反：它總是選擇更大的維度。這對於需要通過更大的測量來擴展的要素很有用。

適應容器的百分比

基於百分比的寬度始終與父元素的寬度有關。高度百分比可以以相同的方式縮放，但前提是父母具有定義的高度；否則，它們可能無法按預期工作。

填充和保證金百分比始終是根據父寬度計算的，即使對於頂部和底部值也是如此。這使得創建一致的間距和比例佈局成為可能，尤其是在流體設計中。

區別

絕對單位就像一個剛性統治者，而相對單位的行為更像是測量膠帶。兩者都衡量事物，但是當條件變化時，它們的反應非常不同。他們比較以下方式：

大多數開發人員最終都使用了兩者：用於需要保持清晰的小東西的像素，以及需要彎曲的大型結構件的相對單位。

為您的設計選擇合適的單元

您網站的不同部分需要不同的方法。有些元素到處都保持相同的尺寸，而另一些元素根據屏幕尺寸或用戶設置進行調整。大多數開發人員都想到了這一點。有一種更簡單的方式：將單元與您想要的元素做的事情匹配。

首先考慮您的用戶

人們以意想不到的方式瀏覽您的網站。有人在電話上訪問。您的文字看起來很小，所以它們捏住了變焦。如果您使用REM單元構建，則一切都會成比例地生長。如果您到處都使用像素，那麼事情就會開始重疊和破裂。

主要導航需要跨頁的一致尺寸。 REM單元將其綁定到您的基本字體尺寸。您的徽標需要確切的尺寸才能獲得品牌一致性。像素使其保持清晰。

許多用戶更改其瀏覽器的默認字體大小，以提高可讀性。當您的硬碼像素時，您會忽略它們的偏好。如果有人放大到125％，您的基於像素的佈局會崩潰。相對單位自動調整。

快速選擇合適的單元

這是分解您的選擇而不會迷失細節的方法：

• 文本和周圍的間距：使用EM或REM。按鈕填充尺度具有文本大小。利潤與標題成正比。
• 與屏幕相關的元素：使用視口單元。填充大多數屏幕的英雄部分。獲得特定屏幕百分比的側邊欄。
• 需要精確控制的元素：使用像素。保持酥脆的薄邊界。具有完美對齊的小圖標。用精確的偏移掉落陰影。
• 基於容器的元素：使用百分比。適應父母的靈活網格。與容器相擴展的圖像。

啟動簡單。使用像素進行裝飾鑽頭，REM用於文本和相關間距，屏幕尺寸部分的視口單元以及柔性容器的百分比。選擇相關元素的系統並堅持下去。

常見的CSS單位錯誤以避免

您選擇所有像素，因為它們感到安全。您的按鈕在筆記本電腦上的75像素寬度上看起來很完美。然後有人在手機上打開您的網站，並且同一個按鈕吃了一半的屏幕。您的徽標需要確切的尺寸，但是您的內容區域需要靈活性。隨機混合這些方法，然後創造混亂。因此，這裡有一些有關避免標準CSS單元錯誤的提示：

1。為所有內容挑選像素

像素感到安全，因為20個像素意味著20個像素。簡單，對嗎？您的300像素範圍的側邊欄在桌面上正常工作。在移動設備上，它變成了一個巨大的塊，將您的內容粉碎成細條。您的16像素文本在高密度屏幕上變得不可讀。

當某人增加瀏覽器的字體尺寸時，您的基於像素的佈局就無法適應。文本溢出容器。按鈕消失在其他元素後面。您的側邊欄崩潰了您的主要內容。

將像素保存為真正需要精確控制的事物：薄邊界，小圖標和掉落陰影。對於其他所有內容，請嘗試使用相對單位。

2. EM單位失控的單位

EM單位根據父母的字體大小擴展。這聽起來很靈活，直到您開始築巢為止。假設您的容器使用1.2EM，並且內部的標題使用1.5em。由於1.2×1.5 = 1.8，該標題變為1.8em。保持築巢，大小可以滾雪球。更改一個母體字體大小，並在下游變化。

REM單元修復此問題。它們總是引用根元素，因此2REM無論使用何處而表示相同的東西。這使您的版式更容易擴展和控制。

3。在移動設備上跳來跳去的視口單元

將您的英雄部分設置為100VH，並且完美地填充了屏幕。滾動時，除了移動瀏覽器隱藏並顯示其地址欄。 Android上的iOS和Chrome上的Safari都這樣做。當地址欄消失時，您的100VH部分突然變得太高了。當它重新出現時，您的內容將被切斷。

較新的DVH單元適應了不斷變化的視口尺寸。不過，瀏覽器支持仍在追趕。作為後備，使用CSS自定義屬性的JavaScript解決方案有效。

用固定尺寸破壞可訪問性

用戶通常會調整其瀏覽器的默認字體大小以提高可讀性。當您使用固定像素的硬碼文本，按鈕和間距時，您的佈局可能會破壞 - 文本可能會溢出，按鈕可能變得無法使用，關鍵元素可能會在更高的縮放級別下消失。

根據WCAG和Apple的標準，建議將觸摸目標至少為44×44 CSS像素。對於有運動障礙的用戶來說，較小的目標可能會具有挑戰性。

而不是使用固定尺寸鎖定，而是使用可擴展單元（例如REM）創建尊重用戶首選項的佈局。將基本字體尺寸設置在元素上，然後將標題，按鈕和間距始終如一，並在網站上使用相對單元。

5。高密度屏幕上的微小文字

不同的設備對像素的包裝不同。當您的顯示器的屏幕上有100個時，手機的屏幕可能具有每英寸400像素。相同的像素計數在每個設備上看起來完全不同。

您的14像素文本在桌面顯示器上看起來不錯。在高密度的電話屏幕上，相同的14個像素變成顯微鏡。用戶斜視和捏縮放。

當您使用相對單位時，操作系統和瀏覽器會自動處理縮放。您的1REM文本在高密度屏幕上變大，在低密度屏幕上變小。

6。沒有計劃的混合單元

您將REM用於某些標題，將EM用於其他標題，而Pixels則用於身體文本。您的設計缺乏節奏，因為不同的元素比例不同。選擇相關元素的系統。如果您的標題使用REM，則所有標題都應使用REM。如果您的間距使用EM，請繼續使用EM進行相關間距。

跨設備和用戶設置測試您的選擇。當某人增加字體尺寸時，請檢查您的設計外觀。幾分鐘的測試可節省數小時的錯誤修復。

Divi 5的高級單位如何簡化CSS管理

用CSS單元摔跤會很快變老。您花費數小時調整值，在不同的設備上進行測試以及修復破碎的佈局。 Divi 5完全改變了這一點。新系統將猜測從單位選擇中取出，並為您提供對響應行為的視覺控制，而無需接觸代碼。但是首先，讓我們了解Divi是什麼。

什麼是Divi？

Divi是一個網站構建器，它將WordPress變成了希望自己的網站看起來不錯的人們實際上有意義的東西。

在您的頁面上拖動200多個模塊中的任何一個。將文本正確地更改為位置。選擇新的顏色並立即觀看它們。您正在研究真實的事情，而不是對您的預覽模式。

主題包括2000多個不吮吸的佈局。針對餐館，攝影師，顧問和其他數十家業務的真實設計。找到您喜歡的一個並調整它，直到感覺正確。

主題構建器可讓您控制所有內容。創建看起來不通用的標題，構建出色的博客頁面，並將您的404頁變成人們實際可能想要看到的內容。

使用AI建立網站

Divi AI在您的設計區域內工作。需要文字嗎？它寫了。

想要圖像嗎？它使他們。您甚至可以描述照片編輯，並且可以處理工作。

同樣，對於代碼和新部分。

Divi快速站點解決了當您凝視空白頁面而沒有任何線索的空白頁面時，就解決了這一可怕的時刻。從我們的團隊實際設計的初學者站點中進行選擇，並配有原始圖像和藝術品。

或將您的業務描述為Divi快速站點 + Divi AI，並讓其從頭開始構建一些東西。

這些AI構建的網站將具有與您講述的內容相匹配的真實標題，複製和圖像。用AI生成所有內容，從Unsplash中獲取照片，或者丟下佔位符。首先設置字體和顏色，然後讓AI圍繞它們工作。您仍然可以編輯所有內容。

Divi 5中的新功能

Divi 5從頭開始重建一切。我們取消了舊的短碼系統，並構建了與當今網絡標準更好的功能。站點加載更快，編輯器響應更快，您可以訪問以前不可能的工具。

但是有什麼新功能？看看：

Flexbox佈局系統

現在，在Divi中建立現代響應迅速的網站現在更快，更直觀。我們已經在Divi 5中引入了一個完整的Flexbox佈局系統，為您提供了簡單的控制垂直對齊，內容包裝和間距的控件。創建所需的確切佈局，而無需與代碼戰鬥或使用複雜的解決方法。

選項組預設

選項組預設可讓您保存可以在任何地方混合和匹配的樣式。做一次陰影樣式，然後將其用於按鈕，卡片，部分等。更新預設，並在整個網站上立即發生變化。

設計變量

品牌顏色，字體和間距現在都生活在一個地方。您可以通過編輯一個變量來從藍色切換到綠色。您的整個網站會自動更新，因此您不必通過數十個模塊進行狩獵。

高級單位

現在，您可以使用所有具有Divi 5的高級CSS單元：從PX到VW/VH。 CSS功能現在在構建器中也可以正常工作。想要一個屏幕高度的80％的部分減去標頭嗎？鍵入calc（80VH - 100px），您將設置。該界面處理clamp（），min（），max（）：所有這些響應技巧。

嵌套行

行現在最深入的行列，排在其他行。建立復雜的雜誌佈局或詳細的產品頁面，而無需與結構進行戰鬥。每個級別都可以完全控制間距和設備行為。

一單擊編輯

點並單擊頁面上的任何地方以開始編輯。在我們身後搜索微型編輯按鈕或通過多個菜單導航的日子。

可自定義的斷點

Divi 5的可自定義斷點可以使您啟用七個不同的屏幕尺寸。無論是大型監視器的1200px，平板電腦的900px，還是手機的650px。

多面板工作區

根據需要安排工作區面板。保持多個設置面板同時打開，而不是在不同的接口區域之間不斷跳躍。

屬性管理

以手術精度在網站的不同部分之間複製特定元素。僅從一個元素中抓取間距，只是從另一個元素中抓取顏色，或者只是第三個元素的預設。不再有全部或全無的轉移。

畫布縮放

調整工作區尺寸，以預覽您的網站在不同設備上的顯示方式。請參閱移動，平板電腦和桌面視圖，而無需切換到單獨的預覽模式。

績效改進

現在一切都感覺更狡猾。頁面更快地加載，構建器響應速度更快，複雜的佈局不會像以前那樣陷入界面。

模塊組

將多個模塊捆綁到一個容器中。將文本塊，圖像和按鈕視為一個單元。將它們一起移動，將它們造型，然後將整個內容複製到其他頁面。

HSL顏色系統

建立具有色調，飽和度和輕度控制的配色方案。創建品牌顏色變化，看起來專業。該數學會自動創建令人愉悅的組合。

還有更多...

• 循環構建器：構建模板，用於重複博客網格或產品列表等內容。設計一次，讓系統填充您的實際內容。
• WooCommerce模塊：用於產品網格，單個產品頁面和購物車功能的特定於商店的模塊。在線商店需要的一切都需要專門用於銷售。

在Divi 5中使用CSS變量

當您需要在多個元素之間保持一致的值時，網站樣式變得乏味。 CSS變量通過將可重複使用的值存儲在一個位置中來解決此問題。 Divi 5支持傳統的CSS變量及其自己的設計變量系統，從而使您在管理網站的外觀方面具有靈活性。

Divi 5直接在其輸入字段中接受任何CSS單元。寫REM，VW或您以前只能使用像素的百分比值。構建器立即處理這些單元，而無需其他設置。

CSS功能以相同的方式工作。輸入流體版式或最小值（500px，90％）的夾具（1REM，4VW，3REM）以進行響應寬度。當您設計時，視覺構建器會實時處理這些計算。

變量與此系統無縫集成。定義一個CSS變量，例如–header-Height：80px，然後使用任何字段中的VAR（–header-Height）引用它。 Divi識別語法並自動應用您的存儲值。

這種直接集成意味著您可以在同一項目中混合傳統單元，現代CSS功能和變量。使用像素進行邊界，視口單元進行部分，以及用於重複測量的變量。

設計變量：應用高級單元的更好方法

設計變量是Divi 5的CSS變量內置替代方案。它們完全通過視覺界面工作，而無需任何代碼知識。您使用Divi的變量管理器面板創建和管理這些變量。

這些變量超出了簡單的數字和顏色。存儲完整的圖像URL，文本內容或複雜的樣式值。當您更新設計變量時，使用它的每個元素都會立即在整個網站上發生變化。

Divi 5提供了幾種可滿足不同內容需求的可變類型：

• 顏色變量存儲十六進制代碼，漸變，品牌顏色，文本顏色，背景和邊界。
• 字體變量在全球管理主題定制器的限制之外管理排版，並為任何文本領域工作。
• 數字變量接受任何CSS單元加上CSS功能，例如clamp（），calc（），min（）和max（）用於間距，大小和動畫。
• 圖像變量存儲可重複使用的圖像，例如徽標，背景和圖案。
• 文本變量存儲可重複使用的文本字符串，例如聯繫信息，標語和業務詳細信息。
• URL變量存儲可重複使用的鏈接，用於社交媒體，分支機構，促銷和TEL/MAILTO鏈接。

設置具有數字設計變量的CSS單元

數字變量為您提供了保持一致的設計的構建塊。當您重複不同元素的相同測量時，它們的效果最佳。另外，它們比使用CSS代碼摔跤要簡單得多。

在Divi界面中找到變量管理器。創建一個新的數字變量，並為其提供適合您設計的值。使用清晰的名稱，例如“鈕扣填充”或“截面差距”，而不是模糊的標籤。

創建您的變量庫

您可以添加常見變量，例如：

• 3REM的“按鈕高” - 具有文本大小的按鈕比例
• 8VH時的“劃分” - 間距適應屏幕高度
• 0.5REM的“邊境 - 拉迪烏斯” - 圓角保持比例
• 75VH的“英雄高” - 英雄部分填滿了大多數屏幕
• 1px的“罰款” - 酥脆線保持清晰
• 夾具（1REM，2.5VW，2REM）的“流體文本” - 文本平穩縮放
• 最低的“內容寬度”（90％，1200px） - 容器保持可讀
• 計算（2REM + 2VW）的“動態差距” - 間隔隨屏幕尺寸而增長

將它們應用於模塊，部分或行設置中。

您的REM變量尺寸為文本大小。 VH單元適應較小的屏幕。帶有夾具（）的變量會自動調整最小值和最大值之間。

建築物連接的預設

用變量對元素進行造型後，將間距保存為選項組預設。現在，此預設具有對您的數字變量的參考。

當您將此預設應用於其他模塊時，它們繼承了相同的基於變量的間距。在變量管理器中將“卡片填充”從2REM更新為3REM，並且使用預設自動更新的每個元素。

預設保持不變，但是值會改變。這適用於所有設計變量：顏色，字體，圖像，文本和URL。您的預設變得動態而不是靜態，從而使網站範圍內的更新成為可能。

使用CSS單元和Divi 5建立更好的網站

使CSS單元正確改變您的構建網站的方式。您將修復較少的破碎佈局，並創建跨設備的設計。像素指甲精確細節。相對單位適應不同的屏幕和用戶偏好。

Divi 5使使用高級CSS單元的建築輕而易舉。將任何單元鍵入構建器，並立即查看結果。設計變量使您的網站保持一致。更改一個值，所有連接的所有內容都會自動更新。

您的網站應該比斷點戰和無盡的佈局修復更好。嘗試Divi 5，觀看CSS單元將令人沮喪的設計會話變成平滑的工作流程。