1、當元素A的字體單位是n rem時，它將根據根元素（html）的font-size的大小作爲基準，比如
View Code
parent-div中的em-div的font-size爲2rem,他的基準就是html的字體大小10*2=20,並不受父元素的影響。width:10em;就是20*10，即寬度爲200px;
2、重點理解:
有一個比較普遍的誤解，認爲 em 單位是相對於父元素的字體大小。 事實上，它們是相對於使用em單位的元素的字體大小。
父元素的字體大小可以影響 em 值，但這種情況的發生，純粹是因爲繼承。
使用 em 單位存在繼承的時候，情況會變得比較棘手，因爲每個元素將自動繼承其父元素的字體大小。 繼承效果只能被明確的字體單位覆蓋，比如px,vw。
使用 em 單位的元素字體大小根據它們來定。 但該元素可能繼承其父元素的字體大小，而父元素又繼承其父元素的字體大小，等等。 因此，以 em 爲單位的元素字體大小可能會受到其任何父元素的字體大小影響。
可以通過比較以上代碼中帶有em-div-none和em-div-fontem樣式的div可以看出差別。
3、當 em 單位設置在 html 元素上時，它將轉換爲em值乘以瀏覽器字體大小的設置，來作爲html的font-size大小。那麼，10em就是10*html的font-size;
4、總結 rem與 em 差異
rem單位翻譯爲像素值是由html元素的字體大小決定的。 此字體大小會被瀏覽器中字體大小的設置影響，除非顯式重寫一個具體單位。em單位轉爲像素值，取決於他們使用的字體大小。 此字體大小受從父元素繼承過來的字體大小，除非顯式重寫與一個具體單位。
5、rem 單位提供最偉大的力量並不僅僅是他們提供一致尺寸而不繼承。
重要的是:
一些設計師使用結合 rem 單位的方式給html元素設置了一個固定的px單位。 這是很普遍的做法，所以改變html元素的字體大小時，可以使整個頁面做相應調整
這樣的話，它重寫繼承了用戶設置的瀏覽器字體大小。但是，這剝削了用戶自行調整以獲得最佳視覺效果的能力。
如果您確實需要更改 html 元素的字體大小，那麼就使用em，rem單位，這樣根元素的值還會是用戶瀏覽器字體大小的乘積。
這將允許您通過更改您的 html 元素的字體大小，調整你的設計，但仍會保留用戶的瀏覽器設置的效果。
6、em 單位取決於一個font-size值而非 html 元素的字體大小。
主要適用於：
設計組件比如按鈕，菜單和標題可能會有自己明確的字體大小。 當你修改字體大小的時候，你希望整個組件都適當縮放。
通用屬性這一準則將適用於在非默認字體大小的元素上的padding、 margin、 width、 height和line-height等值。
當您使用 em 單位，他們使用的元素的字體大小應設置對rem單位，以保留的可擴展性，但避免繼承混淆。
7、使用 em 單位:
根據某個元素的字體大小做縮放而不是根元素的字體大小。
一般來說，你需要使用 em 單位的唯一原因是縮放沒有默認字體大小的元素。
根據我們上面的例子，設計組件比如按鈕，菜單和標題可能會有自己明確的字體大小。 當你修改字體大小的時候，你希望整個組件都適當縮放。
通用屬性這一準則將適用於在非默認字體大小的元素上的padding、 margin、 width、 height和line-height等值。
我建議，當您使用 em 單位，他們使用的元素的字體大小應設置對rem單位，以保留的可擴展性，但避免繼承混淆。
通常不使用 em 單位控制字體大小
我們經常會看到使用em作爲字體大小單位，特別是標題，當我認爲如果使用rem將更具可擴展性。
標題經常使用 em 單位的原因是他們相比px單位，在相對常規文本大小方面更出色。 然而 rem 單位同樣也可以實現這一目標。 如果 html 元素上任何字體大小調整，標題大小仍會縮放。
我們可以想到的例子是一個使用 em 字體大小的下拉菜單，我們有第二個級別的菜單項文本大小取決於第一級字體大小。 另一個例子可能是用在按鈕裏面的字體圖標，字體圖標的大小跟按鈕的文本大小有關。
然而，大多數 Web 設計中的元素往往不會有這種類型的要求，所以一般使用 rem 單位的字體大小，em 單位只在特殊的情況下使用。
8、這裏理解的不到位，先記錄下來。
始終使用 rem 單位做媒體查詢
特別注意，當使用 rem 單位創建統一可擴展的設計，媒體查詢也應該是rem單位。 這將確保，無論用戶瀏覽器的字體大小，您的媒體查詢會對它作出反應和調整您的佈局。
例如，如果用戶縮放文本非常高，您的佈局可能需要從兩列到單個列調整，因爲它可能會在較小的移動設備上顯示。
如果您的斷點在固定的像素寬度，只有不同的視口的大小可以觸發它們。 但是基於 rem 的斷點他們將響應不同的字體大小
9、
不要使用 em 或 rem的情況 :
多列布局
佈局中的列寬通常應該是 %，因此他們可以流暢適應無法預知大小的視區。
然而單一列一般仍然應使用 rem 值來設置最大寬度。
當元素應該是嚴格不可縮放的時候
在一個典型的 Web 設計的過程中，不會有很多部分的你不能使用伸縮性設計的佈局。 不過偶爾你會遇到真的需要使用顯式的固定的值，以防止縮放的元素。
採用固定的尺寸值的前提應該是，如果被縮放的話，它的結構會被打碎。 這真的不常出現，所以你想拿出那些 px 單位之前，問問自己是否使用它們是絕對必要的。
10、
總結
讓我們以一個快速符號點概括我們介紹的內容:
rem和em單位是由瀏覽器基於你的設計中的字體大小計算得到的像素值。em單位基於使用他們的元素的字體大小。rem單位基於html元素的字體大小。em單位可能受任何繼承的父元素字體大小影響rem單位可以從瀏覽器字體設置中繼承字體大小。使用
em單位應根據組件的字體大小而不是根元素的字體大小。在不需要使用
em單位，並且需要根據瀏覽器的字體大小設置縮放的情況下使用rem。使用
rem單位，除非你確定你需要em單位，包括對字體大小。媒體查詢中使用
rem單位不要在多列布局中使用
em或rem,改用%。不要使用
em或rem，除非縮放會不可避免地導致要打破布局元素。