CSS測量單位介紹

一、像素（px）

像素是最常見也是最基本的CSS測量單位，一個像素表示一個物理像素，即屏幕上的一個點。在使用像素進行樣式設計時，需要注意的是不同的物理設備具有不同的像素密度，將同樣像素大小的元素在不同密度的設備上展示會有不同的顯示效果。同時在響應式設計時，如果只使用像素作為尺寸單位，元素會因為屏幕大小的變化而變得比例不合適，因此需要輔助其他的單位進行配合使用。

div {
  height: 50px;
  width: 100px;
  font-size: 14px;
}

二、EM/REM

EM和REM是相對於文本字體大小的相對單位。EM的大小是基於元素的字體大小而定的，如果元素的字體大小為16px，則1em就是16px。REM是相對於根元素的字體大小確定的。因此REM相對於EM來說更加穩定，可以避免層級嵌套對尺寸的影響。

html {
  font-size: 16px;
}
div {
  font-size: 1.5em;
  padding: 2rem;
}

三、百分比（%）

百分比是相對於包含元素的尺寸來計算的。因此，如果將元素的寬度設置為50%，它將佔用父元素寬度的一半。此外，百分比可以用於任何需要尺寸調整的屬性，如height和padding等。同時在響應式設計應用中，百分比更加常用，可以通過父子元素之間不同尺寸比例的設置，實現布局及寬高的適應性調節。

div {
  width: 50%;
  padding: 10%;
  margin: 2%;
}

四、視窗單位（vw、vh、vmin、vmax）

視窗單位是相對於瀏覽器視窗大小的單位。該單位無論屏幕大小如何，都可以確保元素的大小與瀏覽器視窗保持一致。vw、vh分別表示視窗寬度和高度的百分比，vmin、vmax分別為vw和vh中較小和較大的一個值。視窗單位的使用適用於響應式設計，可以根據視口尺寸動態調整布局大小。

div {
  width: 50vw;
  height: 50vh;
  margin: 5vmin;
}

五、實際長度單位（cm、mm、in、pt、pc）

實際長度單位可以根據列印設計需要將設計稿精確的轉換到紙質版面上進行列印。這些單位就是描述實際長度的，包括cm、mm、in、pt和pc。最常用的是pt和px兩種單位，在印刷物的設計中，1pt被定義為1/72英寸。

div {
  width: 5cm;
  height: 2in;
  margin: 1pc;
}

六、計算單位（calc）

calc() 函數用於動態計算長度、百分比、角度等值。通過計算單位可以使CSS樣式更加靈活，支持更高級別的樣式設計。calc() 函數需要包含兩個參數之間的運算符，可以是加、減、乘、除等。

div {
  width: calc(50% - 20px);
  height: calc(100vh - 100px);
}

以上介紹了CSS常用的測量單位。通過對每個單位的介紹，我們可以更好的掌握各種的單位與其應用場景，更好的處理相關設計問題。因此在使用樣式設計時，需要選擇合適的測量單位，才能達到理想的效果。