過去，許多網頁設計師都偏愛使用px（Pixels）作為網頁設計的字級單位。
主要的原因是：電腦螢幕顯示的基本單位就是像素（Pixel），直接在網頁上明訂字級為多少px，將可以獲得失真最小的一致性。
然而，伴隨忠於原始設計而來的缺點則是：網站訪客無法在瀏覽器裡自由調整字級大小，因為字級早已在網頁樣式宣告裡被px訂死了。
除此之外，電腦螢幕解析規格的愈漸多樣化也促使網頁設計師開始改用另一種彈性較大的字級單位：em。
em原本是印刷上用來衡量字體大小的單位，一般都以16點（points）作為1 em。
em並不是任何專有名詞的縮寫，而單純只是指一個大寫字母「M」所佔有的寬度。
為什麼是大寫字母「M」呢？因為在所有字母裡，M是最接近全尺寸滿格的一個，所以把它拿來當作衡量字體大小的單位，應該也最恰當。
使用em作為字級單位時，通常會先宣告body的字級大小，譬如說我慣用12px大小的字級，就先宣告body如下：
body { font-size:75% } /* 16px*75%=12px */
這麼一來，網頁上的1em就不再是預設的16px，而是12px。
body宣告完後，就可以開始以em為單位來制定字級：
body { font-size:75% } /* 16px*75%=12px */
h1 {font-size:2em} /* 2*12px=24px */
p{font-size:1.25em} /* 1.25*12px=15px */
li, span{font-size:1.25em} /* 1.25*12px=15px */
不過，相較於px，em的使用彈性雖大，但，卻依然存在需要進一步解決的問題。
em的問題是：字級大小會隨著巢狀層級而疊加。
譬如說：li的字級是15px，但li裡的li則會因為1.25*15px而疊加到18.75px，若再有一層li li li則會進一步1.25*18.75疊加上去……。
em的疊加問題，其解決之道雖然只要再加一行宣告，讓巢狀結構下的所有次層級都歸零即可。
li li, li p, li span, li p span, p span{font-size:1em} /* 歸零 */
不過，如果巢狀結構複雜，歸零作業也會變得相對麻煩。
最後一個字級單位：rem，則是CSS3新推出來解決em疊加問題的字級單位。
rem的字義是「root em」，簡單地說，就是先宣告一個所有網頁元件都共用的em單位：
html { font-size:75% } /* 16px*75%=12px */
接著，所有字級都依此標準來設計制定：
body { font-size:1rem } /* 1*12px=12px */
h1 {font-size:2rem} /* 2*12px=24px */
p{font-size:1.25rem} /* 1.25*12px=15px */
li, span{font-size:1.25rem} /* 1.25*12px=15px */
由於所有網頁元件都共用同一個em單位，所以也不會產生em的疊加問題。
至於，網頁設計該用哪種字級單位，我覺得所有網頁設計師都應該先弄清楚這些字級單位的特質與優劣，再來就是衡量手上的案子，其成品將會出現在哪些數位裝置的螢幕上、使用者會以哪一款瀏覽器開啟……。
斟酌考慮過這些主客觀因素之後，答案自然浮現。
延伸閱讀：
謝謝^^
是不是會因為1em=12px，這樣的是已經被我定義了，所以手機上的文字無法以預設的最佳化大小呈現呢？