CSS度量單位

CSS（層疊樣式表）中的度量單位決定了如何對元素的尺寸、間距和邊距進行計算。在頁面設計過程中我們經常使用這些單位來達到自己的設計目的。本篇文章將從多個角度分析並詳細闡述CSS中的度量單位。

一、像素（Pixel）

像素是CSS中最常用的度量單位。在計算機屏幕中，像素是最小的顯示單元，同時像素也是最精確的度量單位。在CSS中可以使用px作為元素的尺寸、間距和邊距的度量單位。例如， 設定一個元素的寬度為500px，就是表示元素的寬度為500個像素。

儘管像素是最常用的度量單位，但在不同的設備上使用相同的像素單位可能導致顯示出現了問題。在高分辨率設備上使用像素，可能會導致頁面元素的大小變得過於微小，因為元素的尺寸將倍增。而在低分辨率設備上，元素的尺寸則相對於高分辨率設備變得過於巨大。

二、百分比（Percentage）

百分比是CSS中另一個常用的度量單位。它可以相對於某個參考物來計算元素的大小。這個參考物可能是父元素、瀏覽器視口等。在CSS中，可以使用%作為元素尺寸、間距和邊距的度量單位。例如，如果父級容器的寬度為500px，而子元素的寬度設定為50%，則表示子元素的寬度會自動計算為父級容器的50%。

百分比的使用可以使頁面元素的大小與屏幕大小相對自適應。但是，當元素的百分比設定依據於一個未知的長度時，就需要使用其他度量單位進行補充。

三、EM（字母M的寬度）

EM是相對於文本的字體尺寸來計算元素尺寸的度量單位。1個EM等於父元素的字體大小，而對於子元素來說便是等於父元素中的字體大小或者根元素（html）中的字體大小。在CSS中，可以使用em或rem作為元素的尺寸、間距和邊距的度量單位。

使用EM和REM可以實現不依賴於固定像素值而實現響應式設計。但EM會存在「累加值」的問題，即字體大小改變的影響會一直向下累計。因此，REM被廣泛使用，它可以相對於根元素的字體大小來設置元素的尺寸、間距和邊距。

四、視口單位（Viewport Units）

視口單位是CSS3中新增的度量單位，目的是允許設計師基於瀏覽器的可視區域來計算元素的尺寸。視口單位有四種：vw(viewport width)、vh(viewport height)、vmin(viewport minimum)和vmax(viewport maximum)。其中1vw等於視口的寬度的1%。相比於其他度量單位，視口單位可以更加精確地根據屏幕的大小和分辨率來設置元素的大小。

視口單位可以用來設計響應式頁面，並且可以確保在不同尺寸或設備上的顯示效果保持一致。但是，使用視口單位時要注意瀏覽器支持程度不同。

五、物理單位（Physical Units）

物理單位是用於打印媒介和局域網等物理媒介的CSS單位。在打印媒介和局域網中，分辨率通常高於計算機屏幕。因此，我們會使用其他的度量單位來確保我們的文檔適應這些物理媒介。

在CSS中，我們可以使用以下的物理單位：

– 厘米（cm）
– 毫米（mm）
– 英寸（in）
– 像素（px）
– 派卡（pc）
– 點（pt）

需要注意的是，在不同的媒介中，這些單位的尺寸可能會發生變化。若在電腦屏幕中，1英寸等於96像素，但在打印機上1英寸可以有更高或更低的分辨率。因此在使用物理單位設置元素的大小時，需要先了解媒介的分辨率。

除了常規的度量單位之外，CSS還有其他一些度量單位，例如ch單位、ex單位、calc()函數以及關鍵字min()和max()。這裡不再贅述。

代碼示例：

.main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  font-size: 1.2rem;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.box {
  height: 10rem;
  width: 50%;
  padding: 2rem;
  font-size: 1rem;
}

p {
  font-size: 16px;
}

@media only screen and (max-width: 768px) {
  .container {
    width: 90%;
  }
  .box {
    width: 80%;
    height: 5rem;
    font-size: 0.8rem;
  }
}