# Size 尺寸

在響應式網頁設計中，寬度和高度屬性的大小基於裡面的內容，但可以更具體地使用一些來定義。

在本課中，我們將介紹這些：

1. 自動調整尺寸
2. 像素
3. 百分比
4. Ems
5. Rems
6. 基於視窗的單位
7. 小數點單位
8. 字符單位
9. 最小和最大尺寸
10. 溢出

## 自動調整大小

默認情況下，元素的大小是根據裡面的內容自動決定的。

## 像素（PX）

像素值可以與圖像和其他有指定像素值的元素按比例縮放。

![](/files/9bTKuPnPZGIuT2tr1UJq)

## 百分比（%）

百分比指的是元素在父元素裡所佔的比例大小。

## Ems

當您想在一個有文字的元素上設置比例填充時，Ems就很實用。

 每個瀏覽器都有一個默認的字體大小，通常為16px。 Ems查看它們的父元素並按比例調整字體大小。

假設一個字體是16像素： 1個em是16像素 2個ems=32像素 1.5個ems=24像素

您也可以在一個段落的父元素上設置字體大小，比如Div：

1. 選擇父元素
2. 在樣式面板中的"排版"下，改變字體大小（例如：20像素）。

當父元素為20像素時： 1個em=20像素 2個ems=40像素 3個ems=60像素

## Rems

Rems是相對於HTML字體大小而言的。

Rem的計算方法是將Rem值乘以HTML字體大小（它依循瀏覽器的字體大小，除非您在代碼中手動改變它），這樣做的好處是尊重用戶的瀏覽器偏好。

## VW 基於視窗的單位

VW是對瀏覽器視窗寬度的測量，根據視口的寬度按比例進行縮放。

## 小數點單位

小數單位(fr)在任何設置為網格的地方都可以使用。 如果有一個4列的網格，每一列默認為1fr--1fr等於1/4的網格。 如果您增加了一列，每個fr就等於1/5。您可以改變這些值（例如，將第一列設置為2fr）。小數單位會自動縮放事物--一切都會自動計算，包括列的間隙。

## CH 字符單位

字符單位非常適用於確定段落或標題的大小，以限制人們每行所需閱讀的字符數。

例如一個段落的最大寬度為60ch，那麽它就會採用選定的字體（該段落的字體），並將該段落的邊界設置為等於60個零的寬度。

當您試圖限制字符數時，CH讓您在文本元素上設置寬度（基於字體的零字符寬度。）

## 最小和最大尺寸

如果把元素的寬度設置為50%，它就會占用其父元素內50%的空間。 當調整視窗大小時，該元素就會相應地縮小。

如果在元素上設定了最小（如200px）和最大（如500px）的寬度，它就會保持50%的寬度，並且在視窗收縮和擴展時保持在最小（200像素）和最大（500像素）的寬度之內。

**提示** 使用最小值來刪除元素的任何明確的高度，而將最小高度設置為100vh。現在妳的部分不會短於視口高度的100%。 如果想把元素的高度設置為800像素，把它設置為最小高度意味著它將是800像素高，同時尊重其內容的寬度（如果需要，它可以變得更高）。

假如您不希望一個段落的寬度超過60個左右的字符，可以選擇段落標簽，設定最大寬度（例如，60ch），則現在的默認值將自動限制在60個字符的段落（不管是什麽字體的60個零）。

## 溢出

當元素上設置了寬度和高度，但沒有足夠的空間容納裡面的內容時，溢出就會自動發生。默認情況下，溢出的文本是可見的。 選擇元素並點擊進入樣式面板>尺寸>溢出，您會看到第一個圖標，可見（眼睛）圖標，被默認選中，這意味著溢出的文本默認為可見。

1. Hide：隱藏夾住（隱藏）元素邊界外的內容。
2. Scroll：取決於操作系統和瀏覽器，可以顯示滾動條，方便使用者可以滾動瀏覽Div塊的內容。
3. Auto：允許使用者滾動（只有在有足夠的內容溢出的情況下才能這樣做）。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tenten.co/docs-webflow/webflow-101/03-designer-jie-mian-zong-lan/size-chi-cun.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.