簡單對比em和rem
一、首先說一下瀏覽器解析html文件的原理
當瀏覽器解析HTML文件時，建立了一個用來代表頁面元素的集合，叫做DOM（文件物件模型，Document Object Model）樹狀結構，每一個節點代表一個元素。<html>就是頂層節點（根節點），在下面的是它的子節點<head>和<body>，再往下就是它們的子節點，還有後代節點，如此類推。根節點是文件裡所有其他元素的祖先。它有一個特別的偽類（pseudo-class）選擇器（:root），在樣式表裡可以用這個選擇器表示。使用帶類名的型別選擇器html，或者直接用標籤選擇器，效果是一樣的。
二、再說一下em和rem的區別
rem是根em（root em）的縮寫。rem是和根元素關聯的，不依賴當前元素。不管你在文件中的什麼地方使用這個單位，1.2rem的計算值是相等的，等於1.2倍的根元素的字號大小。下面的示例程式碼中，聲明瞭根元素的字號大小，並在巢狀的無序列表中使用rem宣告字號大小。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> :root{/*等價於html選擇器*/ font-size: 1em;/*使用瀏覽器的預設字號大小（16px）*/ } ul{ font-size: 1.6rem; } </style> </head> <body> <ul> <li>示例</li> </ul> </body> </html>
在這個示例裡，根字號大小是瀏覽器的預設大小16px（根元素的1em等於瀏覽器的預設字號大小）。無序列表的字號大小為1.6rem，計算結果是12.8px。因為這隻跟根元素相關，儘管你在列表裡嵌套了列表，巢狀子列表的字號仍然保持不變。
三、相對長度單位rem的適用性：font-size使用rem
一些瀏覽器會提供給使用者2種方式定製文字的大小：縮放和設定一個預設的字號大小。通過按Ctrl+或者Ctrl-，使用者可以對頁面進行縮放。這在視覺上會把整個頁面的文字或圖片（其實是所有元素）都放大或縮小了。在一些瀏覽器，這個改變只針對當前的標籤頁且是臨時的，不會影響到新開的標籤頁。
設定預設字號大小，會有點不一樣。不僅僅是設定的入口比較難找（一般在瀏覽器的設定頁），而且這個設定是永久的，直到使用者把預設值還原。值得注意的是，這個設定對使用px或其他絕對單位定義的字號大小無效。因為預設字號大小對一些使用者是必要的，尤其是弱視的群體，你應該用相對單位rem