Webflow 裡的輸入值和單位設定
輸入和更新數值，並在數字輸入欄中使用不同的單位。
無論你是指定間距值，設置一個元素或字體的大小，還是使用變換來旋轉一個元素，你都可以在適當的輸入欄位中輸入數值和單位。你甚至可以在任何數字領域的輸入欄位中進行數學運算。想把你的div塊的大小增加一倍？在當前值後面輸入 *2 並按 確認鍵。
當你在畫布上添加一個元素並調整其大小時，該元素的起始寬度和高度將與該元素的 "自然 "大小相匹配，基於它在現有布局中的流動。
使用鍵盤改變輸入值
當一個數字欄位被聚焦時，你可以使用鍵盤上的向上↑和向下↓箭頭來增加或減少數值1。按ESC鍵可以取消輸入欄的焦點。
為多個面添加間距預設值
要使用預設為多個面添加空間。
- 在間距部分，點擊其中一個面的數值
- 將 滑鼠懸停在你想選擇的預設值上
- 按住Option（在Mac上）或Alt（在Windows上）並點擊你選擇的數值
這樣做將把預設值應用到一個元素的兩邊–或者你可以按住Shift把值應用到所有的一邊。
用你的 滑鼠改變輸入值
一旦你把游標放在一個數字輸入欄位中，你可以按住Option（在Mac上）或Alt（在Windows上），然後點擊並拖動你的 滑鼠來調整數值（向左拖動以減少數值，向右拖動以增加數值）。不需要把右手從 滑鼠上拿開。
遞增值
你可以按住Option（在Mac上）或Alt（在Windows上）看到輸入欄旁邊的增量箭頭，通過點擊數值旁邊的向上或向下的箭頭來增減。
調整多面的間距值
你可以在拖動margin and padding控制項時按住Option（在Mac上）或Alt（在Windows上），將相同的值應用到兩邊–或者按住Shift將值應用到所有邊。
改變單位
你可以使用單位下拉菜單或在數值後面輸入單位來改變輸入欄位中的單位。
當你把單位從px改為%時，我們會自動為你計算出近似的轉換。
CSS單位
大多數輸入欄位允許你在以下單位中進行選擇。
- PX (Pixels) — 相對於螢幕解析度
- % (百分比) — 相對於父元素而言
- EM — 相對於父元素的字體大小
- REM — 相對於主體元素的字體大小
- VH — 相對於視口高度。視口高度是100vh。
- VW – 相對於視口寬度。視口寬度是100vw。
- – – 沒有單位
對於某些欄位，你可以用一個值來代替單位，如。
- 自動
- 無
排版單位
當你為字體大小或行高等樣式屬性設置值時，應用於你在欄位中輸入的數值的默認單位是像素（px）。還有一些其他的單位你可以選擇，以改變排版尺寸的行為方式。
Pixels (px) [default]
字體大小的像素值可以與圖像和其他有指定像素值的元素按比例縮放。要使用默認的像素值，只需輸入一個數字，例如90，然後按 確認鍵。該值將是90px。
Ems (em)
每個瀏覽器都有一個默認的字體大小，通常為16px。當你把網站上一個元素的字體大小設置為1em，那麼1em將等於16px。而2ems將等於2 x 16px = 32px。
字母是相對於其父輩的字體大小而言的。因此，如果一個父部分的數值為0.5em，那麼子部分的數值為1em的段落的字體大小為16×0.5=8px，而正文中另一個字體大小為1em的段落的字體大小可能為16px。
Rems or- Root ems (rem)
作為em的替代品，你可以使用rems，又稱根em。Rems是相對於HTML字體大小而言的。這將會尊重瀏覽器的默認字體大小。所以，任何數值為1rem的元素都將等同於16px，而不管其父元素的字體大小如何。即使你在正文中改變了你的默認字體。
百分比（%）
和ems一樣，百分比指的是父元素的字體大小。
視口單位(vw & vh)
視口單位可用於創建響應式字體。視口寬度（vw）是基於視口的寬度。當你想把文本按比例放大到視口寬度時，就可以使用這個單位。視口高度（vh）是基於視口的高度。當你想把文本按比例放大到視口的高度時，可以使用這個單位。
當使用視口單位時，請在實際設備上進行測試，特別是在使用vh時。這些字體大小在不同的設備上會有很大差異。
行高單位
無單位
使用 "無單位 "單位是行高的最佳選擇，因為它使行高成為字體大小的倍數。當字體大小改變時，行高會自動調整。
要設置 "無單位 "單位，請從單位菜單中選擇"-"或在數值後面輸入"-"並按 確認鍵。
百分比（%）
行高的百分比值也會乘以字體大小。然而，%可能會出現繼承問題，所以建議使用無單位來代替。
固定單位
如果你想對行高有更多的控制，你可以使用固定值，如px、em或rem。
角度單位
陰影、旋轉和傾斜等變換以及色調旋轉過濾器使用角度單位。你可以使用正值來進行順時針旋轉，使用負值來進行逆時針旋轉。
- DEG (-degrees) – 範圍從0到360度，0和360的值相同。
- RAD (-radians) – 等於180/π度或大約57.3度
- GRAD (-grads) – 相當於一整圈的1/400
- TURN（-轉）–一個旋轉。一圈是360度。
時間單位
時間單位在轉換和互動的持續時間設置中使用。
- MS – 毫秒。1000毫秒是1秒。
這節課有幫助嗎？讓我們知道!
I am a UX Director/ Full-Stack engineer / Linux Enthusiast and Startups Investor with over 15+ years of experience in advertising, technology, and the startup industry. I’ve won Awwwards, helped create products or brands at the Digital Agency of the Decade.