[CSS]網頁用的尺寸單位:PX 跟 EM 怎麼區分呀？等等，還有一個 REM…
每次寫 CSS 樣式表，大家最常用到的語法是什麼呢？ font-size, width, height 等等的關於尺寸的語法，絕對可以排進前三名吧？
今天倒不是要分享 font-size 或是 width, height 這些語法的技巧，而是想跟大家聊聊，關於網頁上設定尺寸的單位：px, em, rem 怎麼使用呢？
CSS 中最常使用的尺寸單位
在CSS的語法中，常用的尺寸單位計有：
- PX(就是我們最熟悉的像素了)、
- PT、
- EM、
- REM、
- %(百分比)
- CM(公分),IN(英吋)…。
早期CSS還沒有很成熟的時候，字型單位比較常用的是 PT(Point)，就像在 Word 裡面設定字體的級數，9級字、12級字這樣，9級字就是 9pt, 12級字就是 12 pt; 不過 PT 這個單位近幾年就很少用到，幾乎是消失在江湖上了。 另外像是公分、英吋等這類型的單位，主要是用來列印到紙張，所以也逐漸退出江湖(愛地球於是大家都少列印了)。
所以這次的主題，就放在另外幾個 PX, EM, REM 上。
PX：絕對尺寸的單位
PX(像素)，相信大家是最熟悉的，不管是在 CSS 裡面用的PX，或是在 Photoshop 上用的px，電腦螢幕解析度用的px，都是同一個PX，這個單位在數位領域里是最常見的關於尺寸的單位了。
1 px(一個像素)理論上就是在螢幕上最小的一點，16px就是16點寬(或高)這樣。 為什麼說用在 CSS 裡面，要講他是絕對尺寸呢？ 在 Photoshop 裡面怎麼不特別標示這是絕對尺寸？螢幕也沒有人這樣說？而且任何一個專有名詞只要一出現，就會感覺讓人頭痛。
在CSS裡面，絕對尺寸的意思是，不管你的字型也好，Div 的區塊也行，用 PX 設定了尺寸以後，即便上層的區塊有任何的設定，他都不會繼承沿襲之前的尺寸，而以這個設定為主。 換句話說就是當你用了 PX 這個單位來設定大小，那麼不管頁面上其他任何的尺寸設定，都不會影響到他。
簡單來講，這裡所謂的『絕對』，是跟下面要介紹的那兩個單位(em, rem)來比較才這麼說的，你也可以不管他絕不絕對這樣 :)
EM：相對尺寸的單位
em 就跟 px 不同了。
em 是屬於『相對尺寸』，就是說如果一個字型或區塊，他的上層已經有過尺寸上的設定，那麼這個子區塊就會相對於上層設定的大小來做變化。
好比說上層設定的字型尺寸是 16px，那麼我們希望他的子區塊的字型稍微大一點，就可以把字型尺寸設為： 1.2em這樣。 1.2 em 產生的結果就是成為上層尺寸的1.2倍，以這個例子來說，上層是 16px的話，那麼1.2em就是19px左右(16*1.2，小數點不計了)。 如果要小一點的話也是一樣，好比設定為 0.8 em，就是16px*0.8，結果就是 13px左右。 那有朋友可能會感到困惑，就是上層如果都沒有設定呢？ 好比說在 body 或 html 這個標籤裡，我們都沒有設定字型大小，那麼後續可以用 em 這個單位嗎？ 也可以的。 如果上層或是根元素都沒有設定大小，那麼每個瀏覽器都會自動有一個預設的尺寸，以字型來說就是 medium(中級字，約16px)，所以通通都沒有設定，那麼 1em 就是16px。
REM：也是相對尺寸的單位….等等，你是整人來的對吧？
REM 這個單位是後來CSS的規格制訂出來的，也是相對尺寸(夠讓人煩躁的了吧？)。 這個相對尺寸跟前一個提到的 em有什麼不同呢？
差別在 em 是相對於他的父元素(就是上一層的標籤/區塊)，而REM，則是相對於根元素，就是最最最最上層的那個 HTML的設定。
用REM做單位，那不管你上層是怎麼設定，都無所謂，他不會繼承，rem 只參考這最上層的 HTML 標籤裡的設定(Root)。
那還是一樣，如果HTML都沒有做任何設定，也是有一個預設的尺寸在。 這個REM好處就是在，如果一個結構比較複雜的網頁，有很多巢狀區塊，那麼在設定的時候，不免就會一個影響一個，到頭來全部混再一起，看到畫面上的結果出來，明明知道尺寸不對，卻也搞不清楚是受到哪一個層級的尺寸設定影響，這時候 REM 就很有用了。
結論：用哪個單位比較好呢？
哪個單位比較好呢？這個就真沒有定論了。
PX 就很適合不太需要很多彈性的場合使用。 像是內文字型，一般就是那樣的大小，桌面版的話就建議 medium(16px)左右，手機版的話，就調高一點，設為 18px，因為這個尺寸不太需要因應不同裝置或使用情境來變化的，就使用 PX 吧！ 那麼如果是標題字，要比較大一點，或特別提醒的區塊樣式，就可以使用 em 或 rem 來設定，像是 h2 的標籤，就設為 1.4 em或是1.4 rem，h3 就設為 1.2 em, 1.2 rem 這樣，那麼瀏覽器就會自動依據相對尺寸來調整標題字的大小。 那麼～
可不可以通通只用 PX 呢？不要再管什麼 em 啦，或是 rem 等等的其他單位，因為太多不想搞清楚了 >”<
當然可以呀。
這些CSS規則都是參考性質的，沒有所謂的標準用法，目的只是讓你的工作變的更有彈性和效率，只要你覺得哪種方式比較便捷比較習慣，就用那個就沒錯了！
而且等有一天你突然覺得想使用不同單位的時候，CSS也不過就是一個純文字檔，用搜尋取代就可以很快的全部更新，別擔心。
這就是我們喜歡 CSS 的主因了，不是嗎？我們也有臉書專頁了，歡迎大家按讚加入喔： @5min.reading
Originally published at km.nicetypo.com.
