如何選擇合適的CSS單位優化你的網站布局？

一、像素(px)

像素是最常用的CSS單位之一，因為它是一個固定的單位，不會因為瀏覽器大小的改變而改變。

在網站布局中，像素可以用於設置元素的寬度、高度、邊框、內距、外距、字體大小等。但是，當用戶的屏幕解析度發生變化時，像素大小可能會導致網站內容看起來過大或者過小。

在使用像素單位時，盡量使用相對大小的像素（rem），而不是絕對大小的像素（px），可以提高響應性和可訪問性的用戶體驗。

/* 使用相對大小的像素 */
.box {
  font-size: 1rem;
  margin: 1rem;
}

二、相對大小的像素（rem）

相對大小的像素（rem）是相對於根元素（HTML）的字體大小而言的，因此它們能夠根據用戶設置的字體大小而動態調整大小。

使用rem單位，可以有效解決頁面縮放帶來的問題，而且可以使用媒體查詢來在不同的設備上針對不同的字體大小調整響應式布局。

使用rem單位，可以提高頁面的可訪問性，使用戶可以更自由地自定義頁面字體大小。

/* 使用rem單位 */
.box {
  font-size: 1.4rem; /* 相對於根元素的字體大小 */
  margin: 1rem;
}

三、視窗寬度單位（vw）

視窗寬度單位（vw）表示相對於視口寬度的一個百分比，其中1vw等於視口寬度的1%。

視窗寬度單位非常適合使用在響應式布局中，可以讓網站上的元素相對於視口縮放，適應不同尺寸的設備。

視窗寬度單位還可以與媒體查詢一起使用，為不同的屏幕寬度設置不同的樣式，從而提高網站的響應性。

/* 使用vw單位 */
.box {
  width: 50vw; /* 相對於視口寬度的50% */
  margin: 1rem;
}

四、視窗高度單位（vh）

視窗高度單位（vh）表示相對於視口高度的一個百分比，其中1vh等於視口高度的1%。

和視窗寬度單位相比，視窗高度單位在響應式布局中並不是那麼常用，但是它們仍然可以用於設置元素的高度。如果你想要元素充滿整個屏幕，或者你想要在屏幕上上下固定某些區域的元素，那麼視窗高度單位可以派上用場。

/* 使用vh單位 */
.box {
  height: 50vh; /* 相對於視口高度的50% */
  margin: 1rem;
}

五、字體相對大小單位（em）

字體相對大小單位（em）表示相對於父元素字體大小的一個倍數，如果父元素沒有設置字體大小，則相對於根元素的字體大小。

字體相對大小單位非常適合用於設計彈性、可伸縮的頁面，也可以使用媒體查詢來針對不同的屏幕尺寸設置不同的字體大小。

/* 使用em單位 */
.parent {
  font-size: 1.2rem;
}
.child {
  font-size: 1.5em; /* 相對於父元素字體大小的1.5倍 */
  margin: 1rem;
}

六、字元寬度單位（ch）

字元寬度單位（ch）表示相對於數字字元「0」的寬度，例如1ch等於數字字元「0」的寬度。

字元寬度單位在設計列寬時非常方便，尤其是在需要保持表格一致的列寬時，並且可以使用媒體查詢來針對不同屏幕尺寸設置不同的列寬。

/* 使用ch單位 */
th, td {
  width: 20ch; /* 相對於數字字元「0」的20倍 */
  padding: .5rem;
}

七、百分比單位（%）

百分比單位（%）與vw和vh類似，但是相對於最近的定位元素而言，而不是視口。

百分比單位非常適合用於自適應布局，可以從父元素繼承具有彈性的寬度和高度。

/* 使用百分比單位 */
.container {
  width: 90%; /* 相對於父元素寬度的90% */
  margin: 0 auto;
}

結論

在使用CSS單位時，應該根據自己的需求選擇不同的單位，以提高網站的可訪問性和響應性。大多數情況下，使用相對大小的單位（rem、vw、vh、em、ch）是最佳實踐。

在設置字體大小時，建議使用相對大小的單位（rem、em），而不是像素（px），因為像素單位的大小不會隨著用戶的字體設置而變化。

在設計自適應布局時，建議使用百分比單位（%），以便元素可以根據父元素的大小來調整自身大小。