CSS單位介紹

一、像素（px）

像素是最常用的 CSS 單位。完美的在屏幕上顯示，但在不同的解析度下可能會導致大小不同。實際上，當您使用像素時，您在屏幕上設置長度。

/* 示例代碼 */
.box {
  width: 300px;
  height: 100px;
  font-size: 16px;
  border: 1px solid #000;
}

像素單位的使用非常靈活，能夠適應不同的場景，但是在不同的設備上可能會出現顯示不一致的情況，如在大屏上顯示過小等。

二、百分比（%）

百分比單位是相對的長度單位，相對於父元素的大小。例如，如果您將一個元素的寬度設置為 50%，它將佔用其父元素寬度的一半。

/* 示例代碼 */
.parent {
  width: 400px;
  height: 300px;
}

.child {
  width: 50%;
  height: 50%;
  background-color: #f00;
}

百分比單位經常用於實現響應式布局和設置元素相對於父元素的大小和位置。

三、視口單位（vw、vh、vmin、vmax）

視口單位是相對於視口大小的單位，視口大小是用戶看到的區域。視口單位的大小隨著視口的改變而改變。

四種視口單位：

• vw（Viewport Width）：1vw 等於視口寬度的 1%。
• vh（Viewport Height）：1vh 等於視口高度的 1%。
• vmin：1vmin 等於視口寬度和高度中較小值的 1%。
• vmax：1vmax 等於視口寬度和高度中較大值的 1%。

/* 示例代碼 */
.box {
  width: 50vw;
  height: 50vh;
  font-size: 5vmin;
  border: 1vmax solid #000;
}

視口單位可以用於創建佔據整個屏幕的元素，例如全屏背景或佔據屏幕一半的元素。

四、字型大小單位（em、rem）

字型大小單位用於設置字體大小。em 和 rem 是兩種常用的字型大小單位。

em：相對於它的父元素的字體大小。如果未設置父元素的字體大小，那麼 em 將相對於瀏覽器的默認字體大小。

/* 示例代碼 */
.parent {
  font-size: 18px;
}

.child {
  font-size: 1.2em;
}

rem：相對於根元素（通常是 “ 元素）的字體大小。如果未設置根元素的字體大小，那麼 rem 將相對於瀏覽器的默認字體大小。

/* 示例代碼 */
html {
  font-size: 16px;
}

.box {
  font-size: 0.875rem;
}

使用字型大小單位可以使文本大小自適應，而不受設備解析度的影響。

五、其他單位（cm、mm、in、pt、pc）

這些單位最初被設計用於列印，但後來也被用於 web 上的元素的尺寸和位置。例如，您可以使用 pt 單位來設置文本大小。

這些單位在設備解析度上不會縮放，而只會在列印時保持不變。因此，不建議在 web 上使用這些單位。

總結

本文詳細介紹了常用的 CSS 單位：像素、百分比、視口單位、字型大小單位和其他單位。每種單位都有自己的優點和限制，需要根據具體情況來選擇合適的單位。