「文字單位」的奧妙

文字單位使用規則

單位這麼多種，有cm、in、pt、pc、mm、m、px、em、rem、%、vw、vh等，但完全不用擔心到底會不會用錯，主要看所輸出最後的結果在什麼媒介上， 是印出實體呢？還是僅呈現在螢幕上？一開始這樣判斷，就能先區分一半了。

網頁設計常見文字單位有哪些？

px、em、rem、%、vw、vh。

繪圖與文書好朋友：pt

字級的使用，若是用在印刷上，此時pt所實際呈現的長寬就相當重要，而pt (point)是長度單位，能明確表示 1pt = 1/72 inch 也約等同於0.35 mm。

網頁初心者好朋友：px

即使不會使用其他的文字單位，最基本的一定是px（絕對單位），也就是pixel像素的縮寫，稱為「絕對單位」也意指寫多少就是固定住，並不會因為響應式而自動變化。

px、pt不一樣嗎？

是不一樣的。因px是顯示於螢幕上，且針對不同系統、裝置、螢幕解析度，也會因此像素尺寸有所不同，就會變成需要不同的換算方式，才能確保最後開發人員所使用的數值是正確無誤的。

相對單位：%、em、rem

%： 百分比乘以網頁預設大小。
em： 以父層文字單位為基準。
rem： 以根元素為基準。

body預設16px，層級關係為 body > p > span
%範例：某區塊文字設定80%，16*0.8=12.8px
em範例：p設定3em（等於48px）、span設定0.2em，span父層為p，算式為48px*0.2=9.6px
rem範例：p設定2rem（等於32px）、span設定為0.2rem，依照根元素body，算式為16px*0.2rem=3.2px

如何使用

因em會隨著巢狀層級疊加倍數 ，有利有弊，若製作網頁前很清楚規則，就不容易搞混層級關係。反而rem會更好理解管控。針對使用em單位，可以限制小一點的區塊來做使用，而rem較適合使用整體更換。

單位轉換推薦網站

此處為em&pt互相轉換，可以看見上述截圖也能看見百分比與points(pt)，有需要的朋友請點擊 前往查看

另外推薦可以適用於任何裝置上查看：網頁字級表 ，可用電腦、手機點擊查看，根據網頁裡所標示的像素(px)，就能知道各個裝置所看見的字體是多大尺寸。