# Size 尺寸

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

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

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

## 自動調整大小

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

## 像素（PX）

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

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F69JkZtZUDx7aUMMiKZwj%2Fimage.png?alt=media\&token=874a21a9-c643-4e83-9988-ea87af3c724c)

## 百分比（%）

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

## 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：允許使用者滾動（只有在有足夠的內容溢出的情況下才能這樣做）。