[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, EM, REM 的換算


常常有朋友會問說,那麼有 PX, EM 換算公式嗎?PX, EM, REM 有沒有固定的轉換規則呢?


其實有,也可以說沒有。


說沒有是因為 PX 是固定的尺寸,而 EM, REM 是相對尺寸,所以這兩種尺寸是無法做『換算』的。
而說有,
則是因為 EM 是針對上層(父層容器)的尺寸做變化,所以換算起來,就是直接跟上層的尺寸相乘就可以了,例如上層設定的字型尺寸是 16px,那麼 1em 就是 16px,1.4em 就是 1.4*16 = 22.4px這樣。
REM也是一樣的,如果網頁的根層級(HTML)是設定 16px,那麼 1rem 就是16px。


有些網頁上會直接跟大家分享說,1em 就等於 16px,這個其實不是很精準,只是一般網頁預設的尺寸是 16px,所以1em 才可以直接等於 16px 喔,但只要有設定其他的數值,那麼 em 也會不同。


結論:用哪個單位比較好呢?


哪個單位比較好呢?這個就真沒有定論了。


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 的主因了,不是嗎?