CSS 調整寬度和高度

在開發響應式網頁設計時，寬度和高度等尺寸是根據其中的內容確定的。但是，可以使用各種單位更精確地定義這些屬性，例如像素(px)、百分比(%)、em、rems、視口寬度(vw)、視口高度(vh)、視口最小值和最大值（vmin 和vmax）、分數單位 (fr) 和字元單位 (ch)。

在這裡，我們將深入研究每個測量單位，同時探索最小值和最大值、溢出管理和物件適合屬性等概念。

具體來說，本課將涵蓋：

1. 自動調整尺寸
2. 像素
3. 百分比值
4. 艾姆斯
5. 雷姆斯
6. 基於視口的單位
7. 分數單位
8. 字元單位
9. 最小和最大尺寸
10. 縱橫比
11. 溢出處理
12. 對象適合用法

自動調整尺寸

預設情況下，Web 元素會根據其內容自動調整其大小。

像素

像素值可以按比例縮放，尤其是在處理具有特定像素值的圖像和元素時。

若要使用預設像素值：

1. 輸入數值
2. 打 進入 鑰匙

百分比值

與em類似，百分比是相對於父元素的字體大小的。例如，在填充部分中將寬度設為 25% 將分配元素內四分之一的空間。

艾姆斯

在按比例調整文字元素的填充時，Ems 會派上用場。每個瀏覽器的預設字體大小通常為 16px。 Ems 根據其父元素計算字體大小，並相應地縮放文字大小。

對於 16 像素的字體大小：

• 1 em 等於 16 像素
• 2 em 等於 32 像素
• 1.5 ems 等於 24 像素

您也可以變更段落父元素的字體大小，例如 分區塊:

1. 選擇父元素
2. 調整字體大小（例如，20 像素） 風格面板 在下面 版式

將父元素設定為 20 像素：

• 1 em 等於 20 像素
• 2 ems 轉換為 40 像素
• 3 ems 轉換為 60 像素

雷姆斯

Rems 是根據 HTML 字體大小計算的。

每個 rem 值都是透過將其與 HTML 字體大小相乘來確定的，並尊重使用者的瀏覽器設定（除非在程式碼中被覆蓋）。這種方法可確保與個人文字大小偏好的一致性。

Rems 引用 root em 單位 (root ems)，與 HTML 等級指定的預設字體大小對齊，除非進行修改。與 ems 不同，rem 不會從各個元素或其父元素繼承字體屬性，而是根據瀏覽器的字體大小進行縮放。

基於視口的單位

視窗寬度 (VW) 測量瀏覽器視窗的寬度，並與視窗寬度成比例調整。

分數單位

分數單位 (fr) 在網格佈局屬性（例如快速堆疊元素）中有效。

如果在 4 列網格上工作，每列預設為 1fr — 分配四分之一的網格空間。新增一列會將每個 fr 調整為 1/5。這些單位的靈活性可以自動處理計算，包括列間隙。

探索有關分數單位的更多資訊。

字元單位

字元單位 (CH) 非常適合設定段落或標題等元素的寬度，以控制每行的字元數。

例如，將段落的最大寬度限制為 60ch 將根據所選字體（零字元寬度）調整框大小以容納 60 個字元。該單元可以精確控製文字寬度，特別是對於基於字元的約束。

最小和最大尺寸約束

當元素的寬度指定為 50% 時，它佔據其父元素內的一半空間（ 部分）。當視窗調整大小時，元素也會相應縮放。

引入最小（例如，200px）和最大（例如，500px）寬度限制可確保元素保持200到500像素的寬度範圍，以適應不同的視窗尺寸。

常見的做法是設定全高部分（例如，100vh）。但是，當元素開始溢出或在視口底部裁剪時，這種方法可能會導致視覺問題。 

提示： 利用最小高度屬性消除固定截面高度，並強制執行 100vh 的最小高度。這樣，該部分始終至少跨越整個視口高度。

例如，將部分高度設定為 800 像素作為最小高度可確保 800 像素的高度，同時適應內容寬度調整（如果需要，允許垂直擴展）。

如果需要將段落寬度限制為 60 個字元左右，則可以將各個段落配置為強制執行最大寬度（例如 60ch）。這將段落寬度限制標準化為大約 60 個字元。

寬高比設定

寬高比設定提供了預先定義和可自訂的比率，用於調整網站上元素的大小，特別有利於需要特定比例的圖像、影片和網格佈局。

有 5 個 比率 可用預設：

• 汽車 — 依需求調整尺寸，適合靈活的佈局
• 變形寬銀幕 (2.39:1) — 非常適合需要大尺寸的電影體驗
• Univisium/Netflix (2:1) — 適用於現代電視和串流內容
• 寬螢幕 (16:9) - 最適合寬佈局元素
• 風景 (3:2) — 有利於稍高的網頁元素
• 肖像 (2:3) — 非常適合高大的佈局元素
• 正方形 (1:1) — 非常適合平衡佈置項目
• 風俗 — 提供設定客製化比率的靈活性

將長寬比與寬度和高度等現有尺寸屬性結合可確保一致性。例如，對具有預定義尺寸的元素套用特定比率將相應地調整相反的尺寸。如果在應用比率之前設定寬度和高度值，則指定的尺寸優先於指定的比率。

若要保留元素比例而不考慮內部內容，請設定 溢出 財產給 隱 可能是有益的。