px(pixel)畫素，相對長度單位。畫素px是相對於顯示器螢幕解析度而言的.

em是相對長度單位。相對於當前文字內的字型尺寸。如當前對行內文字的字型尺寸未被人設定，則相對於瀏覽器的預設字型尺寸任意瀏覽器的預設字型高都是16px,所有未經調整的瀏覽器都符合1em=16px

em特點：

1 em的值並不是固定的

2 em會繼承父級元素的字型大小

3 重新計算那些被放大的字型的em數值，避免字型大小的重複宣告

比如說，你在#content中聲明瞭字型大小為1.2rem，那麼在宣告p的字型大小時就只能是1em,而不是1.2em,因為此em非彼em,它因繼承#content的字型高而變為了1em=12px

rem特點：rem(root em)，使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是HTML根元素，這個單位集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例的調整所有字型，又可以避免字型大小逐層符合的連鎖反應。em和rem單位之間的區別是瀏覽器根據誰來轉化成px值，理解這種差異是決定何時使用哪個單元的關鍵rem如何轉換為畫素值當使用rem單位，他們轉化為畫素大小取決於頁根元素的字型大小，即html元素的字型大小。

例如，根元素的字型大小為16px,10rem將等同於160pxem單位

如何轉換為畫素值當使用em單位時，畫素值將是em值乘以使用em單位的元素的字型大小.

例如：如果一個div有18px字型大小，10em將等同於180px，em是相對於使用em單位的元素的字型大小.父元素的字型大小可以影響em值，但這種情況的發生，純粹是因為繼承。每個元素都會自動繼承其父元素的字型大小。繼承效果只能被明確的字型單位覆蓋，比如px、vw使用em單位的元素字型可能會收到其任何父元素的字型大小影響根html元素將繼承瀏覽器中設定的字型大小，除非顯式設定固定值去覆蓋，所以html元素的字型大小雖然是直接確定rem值，但字型大小可能首先來自瀏覽器設定，因此瀏覽器的字型大小設定可以影響每個使用rem單位以及每個通過em單位繼承的值最好不要去改變html元素的字型大小，因為它重寫繼承了使用者設定的瀏覽器字型大小，並且這剝奪了使用者自行調整以獲得最佳視覺效果的能力