不同種類的CSS相對單位

CSS中的相對單位有很多種類型，每一種都有其適用的場景和特點。以下將介紹常用的相對單位，並提供一些具體的程式碼範例。

1. em
   em是相對於目前元素的font-size大小來計算的單位。例如，如果一個元素的font-size為16px，那麼1em就等於16px。如果一個元素的字體大小為2em，那麼它的字體大小就是父元素字體大小的2倍。

p {
  font-size: 16px;
}

span {
  font-size: 0.5em; /* 相当于8px */
}

2. rem
   rem是相對於根元素（即html元素）的font-size大小來計算的單位。它的使用方式與em類似，但是不會受到父元素的影響。

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem; /* 相当于24px */
}

3. vw/vh
   vw和vh是相對於視窗寬度和視窗高度的單位。 1vw等於視窗寬度的1%，1vh等於視窗高度的1%。這種單位常用於響應式設計中，可以根據視窗大小自動調整元素的大小。

div {
  width: 50vw; /* 相当于视窗宽度的50% */
  height: 30vh; /* 相当于视窗高度的30% */
}

4. %
   百分比單位是相對於父元素的大小來計算的。例如，如果一個元素的寬度為50%，那麼它的寬度就是父元素寬度的一半。

.container {
  width: 200px;
}

div {
  width: 50%; /* 相当于100px */
}

5. ch
   ch是相對於目前字體的寬度來計算的單位。一個ch等於目前字體的字元“0”的寬度。

p {
  font-size: 16px;
}

span {
  width: 10ch; /* 相当于160px */
}

總結：
相對單位在CSS中提供了更靈活和適應性更強的佈局方式。根據需要選擇合適的單位，可以根據元素的特性和設計需求來選擇適合的相對單位。透過合理使用相對單位，可以實現自適應的佈局效果。

以上是不同種類的CSS相對單位的詳細內容。更多資訊請關注PHP中文網其他相關文章！