CSS單位：掌握測量網頁元素的新方法

CSS（Cascading Style Sheets）是在網頁製作中使用最廣泛的樣式表語言，它實現了頁面的布局與樣式的分離，讓頁面可維護性提高，同時也提高了網頁的載入速度。

CSS中有許多單位，在網頁開發中使用單位是非常重要的，因為單位不僅能夠使頁面更加美觀，還能夠保證不同瀏覽器展現的效果一致。這篇文章將介紹網頁開發中最常用的CSS單位，幫助讀者掌握測量網頁元素的新方法。

一、像素（px）

像素是CSS中最常用的單位，它是相對於顯示器屏幕解析度而言的。一個像素相當於顯示器上的一個點，像素單位與屏幕密度相關。在普通顯示器或筆記本電腦上，1個像素可以表示為每英寸96個點（dpi），而在高解析度的Retina屏幕上，1個像素可以表示為每英寸192個點（dpi）。

/*使用像素設置字體大小*/
h3 {
  font-size: 24px;
}

/*使用像素設置邊框線粗細*/
div {
  border: 1px solid #000;
}

/*使用像素設置圖片大小*/
img {
  width: 200px;
}

二、百分比（%）

百分比單位是相對於父元素的寬度而言的。如果一個元素的寬度設置為100%，那麼它將會佔用其父元素的全部寬度。

/*將子元素寬度設置為父元素的50%*/
.parent {
  width: 500px;
}
.child {
  width: 50%;
  height: 100px;
  background-color: red;
}

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

視口單位是相對於瀏覽器視口而言的，其中vw和vh表示視口寬度和高度的百分比，vmin和vmax分別表示vw和vh中較小和較大的值。

/*設置頁面寬度為瀏覽器視口寬度的50%*/
body {
  width: 50vw;
}

/*設置三個div元素寬度分別為屏幕寬度的1/3*/
.container {
  display: flex;
  flex-wrap: wrap;
}
.box {
  width: 33.33vw;
  height: 300px;
  background-color: blue;
  margin: 10px;
}

四、字體相對單位（em和rem）

相對單位是基於元素自身的字體大小而言的，其中em單位是相對於父元素的字體大小而言的，而rem單位是相對於根元素（即html元素）的字體大小而言的。

/*將元素的字體大小設置為父元素字體大小的2倍*/
.parent {
  font-size: 16px;
}
.child {
  font-size: 2em;
}

/*將根元素的字體大小設置為16px*/
html {
  font-size: 16px;
}

/*將元素的字體大小設置為根元素字體大小的2倍*/
.child {
  font-size: 2rem;
}

五、其他單位（pt、mm和cm）

除了上述常用的單位之外，CSS還支持pt、mm和cm等其他測量單位。pt是「point」的縮寫，表示1/72英寸，通常用於印刷行業。mm和cm分別表示毫米和厘米，通常應用於頁面的列印樣式表。

/*設置元素的字體大小為12pt*/
h3 {
  font-size: 12pt;
}

/*設置元素的寬度為30mm*/
div {
  width: 30mm;
  height: 50mm;
  background-color: red;
}

總結一下，掌握CSS單位是網頁開發中一個非常重要的方面。本文介紹了常用的CSS單位，包括像素、百分比、視口單位、字體相對單位和其他測量單位。如果我們能夠熟練地使用這些單位，就能夠更加靈活地控制網頁的元素大小和布局。