rem與em都是相對單位，我們使用它們的目的就是為了適應各種手機屏幕。
rem是根據html根節點來計算的，而em是繼承父元素的字體。比如下面一個demo
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <title>Test REM</title> <style> html{ font-size: 40px; } body{ font-size: 20px; } .use_em,.use_rem{ font-size: 14px; } .use_em span{ font-size: 1em; } .use_rem span{ font-size: 1rem; } .img_em{ width: 2em; height: 2em; } .img_rem{ width: 2rem; height: 2rem; } </style> </head> <body> <div class="use_em"> <span>font-size使用em</span> </div> <div class="use_rem"> <span>font-size使用rem</span> </div> <p>圖片使用em</p> <img src="../images/face01.jpg" class="img_em"> <p>圖片使用rem</p> <img src="../images/face02.jpg" class="img_rem"> </body> </html>
第一個span繼承了它的父元素div的大小，所以是14px,第二個span是通過html來計算的，所以是40px。第一個img繼承的body，第二個img根據html來計算。通過這個簡單的例子我們得知上面的結論是正確的。所以我們可以通過下面這種比例來對不同的手機屏幕做適配。
比如iphone5上的rem基值為32px，則渲染一張64*64px的div，則用2rem*2rem渲染，換算公式如下————
px/rem = 基值
對於一些固定的元素，我們不推薦使用rem，而改為使用px去確保在同一屏幕上保持一致，比如字體font-size，這個更趨向於閱讀的實用性，不適合排版布局。
em 單位轉為像素值，取決於他們使用的字體大小。 此字體大小受從父元素繼承過來的字體大小，除非顯式重寫與一個具體單位。
如果p元素有相應的px的話，他會根據自身條件來計算，否則會繼承父元素的px。就是說如果我給p元素去掉font-size，那他的padding是32px,就是說我們在使用em時必須要正確管理各個元素。所以個人推薦rem更適合於移動端，它給我們的一個途經去獲取用戶的偏好來影響網站中每一處使用rem的元素大小，不再是使用固定的 px 單位。