對於每一個從事網頁設計的人來說，在撰寫CSS時，無可避免的，會用到各式各樣的單位。雖然比起現實生活中會用到的度量衡單位，網頁設計需要面對的單位數量已經算是少到相當和藹可親了，但一些名詞上意思依然令人感到困惑。在這篇文章中，我們會整理幾個常用到的單位並加以說明，希望每個人在進行網頁設計時，都能清楚知道自己所用的單位代表什麼意思，進而設計出更漂亮的網頁來！

前言

　　下文介紹到的各式單位，是根據JavaScript所定義的，這些單位在HTML及CSS中也適用。但px、%以外的單位，只能用於樣式表，這點請各位網頁設計者注意。

 

相對大小的單位

　　所謂相對大小的意思，代表同一個設定值在不同的環境底下，會產生或看到不一樣的效果。這類單位的特色，是它們存在一個參考的基準點，所展現的效果會依基準點的不同而不同。好處是具有較大的彈性，可以隨環境而變動。缺點則是在某些網頁設計的當時沒有預想到的環境底下，有機會產生可怕的災難。

‧px：像素，以1個像素為1。主要是用在電腦輸出，是最常用的單位之一。但每位使用者會根據自己電腦解析度的不同，看到不一樣的大小。

‧% ：與其他大小之間的比率。比較對象有可能是同一元素內的性質，也有可能是父元素的性質。視網頁設計者的使用方式而定。

‧em：將範圍內，有效字型高度(font-size的值)當做是1的單位。如果樣式表中的font-size性質是使用這個單位，那父元素的「有效字型高度」，會被當做是1。

‧ex：將範圍內，有效字型小寫「x」的高度當做是1的單位。在網頁設計時要注意的是，每種字形的「x」高度不一定相同。另外如果該字形中沒有「x」，也不適用這個單位。

 

絕對大小的單位

　　比起相對大小複雜的基準點參考，對網頁設計者來說，絕對大小應該會好理解很多。但我們必須重複提醒所有的網頁設計者，絕對大小的意思，是它們不會隨環境而變動，這是和相對大小最大的不同點。

‧in：英吋。1英吋=2.54公分。

‧cm：公分。

‧mm：公釐。1公釐=0.1公分。

‧pt：點。1點=1/72英吋，一般用在指定字元大小上，也是文書軟體常用的單位。

‧pc：皮卡。1皮卡=12點。

 

結語

　　看完這篇文章後，網頁設計者一定想問一件事：「那我在做網頁設計時，到底要用什麼單位比較好？」其實這是見仁見智的問題，嚴格來說沒有標準的答案，我們只能提示幾點原則。

　　首先CSS中，其實沒有要求統一單位。但混用各種不同的單位對網頁設計而言其實並沒有太大的好處，所以在可能的情況下，儘量統一單位會比較有一致性。

　　接著，網頁設計本來就是做出來讓瀏覽者在電腦上面看的。考量到每個人電腦的差異性，利用相對大小可能會好一些。不是說絕對單位不好，但絕對單位的強項在會需要實際列印出來的東西上，而非網頁設計。

最後，如果真的為此感到困擾，建議可以盡可能使用px，畢竟它是以電腦解析度做為參考，瀏覽者看到的差異比較不會那麼大。