[css] units of css

  這次來介紹 css的度量衡，尺寸介紹。尺寸共有三種類型，一種是絕對數值，如 inch， cm， mm， pt(point)， pc(pica)， 這種和日常生活相關的尺寸。另外一種是比例上的計算，如 em，ex或 %，最後一種則是特別的單位  px 。

  首先先介紹絕對數值，基於現實生活數值，所以呈現的情況在各種裝置下將會一致，也因此不建議使用在螢幕上，原因是呈現出來螢幕的大小是很多變的，若使用固定尺寸輸出將會造成呈現錯誤。

  絕對數值的轉換公式為 1in = 2.54cm = 25.4mm = 72pt = 6pc。

  接下來來討論比例上的計算，以em當例子，若我們設定字形尺寸為 2in， 1em 就相當於 2in。 em 相關於 font-size大小，所以字體大小也影響到 em的所呈現的大小。我們也常看到 "text-ident: 1.5em" 或是 "margin: 1em"這種用法，都是配合字體大小設定所呈現的格式。下方我做了個 em實例，有機會可以去實驗看看。

Check out this Pen!

  最後介紹 px 這個特別的單位，他和上述兩個不一樣的地方是，他是基於電腦螢幕所發展出來的規格，定義在最小，但是是可以看見的一個單位下所創造出來的螢幕單位。而 px 這名字則是來自於 screen pixels。


  下面這張圖是 W3C 各種單位推薦的的使用方法。也可以參考看看。

參考資料: W3C - EM, PX, PT, CM, IN…