「當你迷惘的時候，就回到原點想一想」-中華一番 蘭飛鴻
網頁前端新手村系列文章，宗旨並不在技術本身的教導，重點放在技術與技術之間的脈胳關係。讓零碎的網頁前端技術的關鍵字，成為比較有系統性的視野。
讓一開始接觸網頁前端的新手們，有一個比較友善的系統來架構你的學習，至於技術本身的深入探討，就留給其它的高手們吧。
出處: 參考資料[1]
大多是印刷相關的單位。也就是平面設計師熟悉的部份
1 pt = 1 / 72 inch，還有各式各樣的定義[2]1 pica= 1/6 inch = 12 pt[3]在印刷這一種真實輸出的設備，絕對單位是很重要的。但是在螢幕這種數位輸出設備，有時就不一定了。尤其是低解析度的螢幕，也許就有長度上的誤差。(也許啦)
過去，CSS要求絕對單位的正確程度。錯誤的顯示大於正確的。所以從2011年開始 CSS 對於絕對單位的精準度不再這麼要求。目前，只在高解析螢幕與列印輸出會正確顯示長度
CSS 沒有定義所謂的「高解析度」，低階打印機在300dpi時開始，高階螢幕在200dpi時。[1]
使用絕對單位，可能在不同的設備的螢幕顯示出不同的大小，所以建議使用相對單位。
有兩個使用相對單位要注意的事
px 相對於顯示設備的 pixel size, pixel pitch (假設 pixel 是正方形)例如: 液晶顯示器的液晶層塗佈決定 pixel 大小，所以是相對單位。
在顯示器上最銳利的顯示設定方式，這算是在顯示器上精度最高的單位。
就算列印出來的相對大小也不會相差太多。
事實上 CSS 要求印表機印出 1px 要在 1/96 inch[1]，也就是有規定好的PPI[5]和DPI。
螢幕內容要列印的單位轉換過程
Pixel → inch → dot
px單位，對於圖片這種「以 pixel 控制」的資料，特別好用。
ex 相對於「當下font-size的字母(小寫)x高」的大小[6]em 相對於「當下font-size的字母(大寫)M寬」的大小[7]rem 相對於「瀏覽器設定字型的 em」，等同於在 body 的 em
CSS 的 font-size ，是會依照 HTML 結構而繼承給子元素。只要其中一層不是使用 em ，而設定了 px 之類的單位， em 就不一樣了。
2013年之後，CSS 出現了 rem 的單位。使用 rem 直接吃瀏覽器預設字型為基準尺寸。
由於 em 和 ex 是基於瀏覽器設定值，以 Chrome 為例單位就是 px 。
若調整字型，內容容器也要調整寬高，可以考慮使用
em,ex。
vh 可視區高vw 可視區寬vmax 可視區長邊vmin 可視區短邊定義
vhpx / 100，vwpx / 100，由算式的單位，可以知道 vh 和 vw 是用來計算 px 值的。
用javascript算一下。[8]
var vw = screen.width/100;
var vh = screen.height/100;
使用者只看見滿版的特定畫面，不要看見雜亂的其它東西。
vh,vw是你的好朋友
百分比 % ，是很特別的一個單位。
它的相對基準，是百變的，用在不同的 css property，就有不同的，100%。
舉一些好玩的例子
| property | 100%在哪裡 |
|---|---|
padding包含top, bottom |
父層容器寬度 |
margin包含top, bottom |
父層容器寬度 |
width |
父層容器寬度 |
height |
父層容器「高度」 |
相對單位，都可以轉換成 pxpx 可以因為 ppi 轉換成 inchinch 已經是絕對單位，可以轉換成任何絕對單位。
相對單位 → px → (ppi) → inch → 絕對單位 (1inch = 2.54cm = 25.4mm = 72pt = 6pc)
CSS繼承了排版單位 pt, pc ，印刷單位 cm, inch ，你可以依你的喜好使用單位，即使不用絕對單位，只使用 em 和 px。
使用 px 可以保持美感上一定的精析度與銳利度。但是用在字型使用 em 可讀性會更好。
<Body> 設定字體大小，使用瀏覽器預設大小，可以保證閱讀上的舒適度。font-size 的內容直接設定 em。使用 @media(print) 設定「列印模式」的 CSS，在此，可以使用 pt 這種印刷單位。
字距用 em，行高用 ex !!
原因在於 em 是 「M」寬， ex 是「x」高(x-height)。2ex ~ 3ex 大約是可以參考的行高設定值。
就像是不會在水平方向使用 vh 單位一樣。
[1]: Unit - w3c
[2]: Point - wiki
[3]: pica - wiki
[4]: DPI - wiki
[5]: PPI - wiki
[6]: X字高 - wiki
[7]: Em (字型排印學) - wiki
[8]: 淺談RWD單位 vh, vw
iThome鐵人賽
看影片追技術