前言
em 和 rem 都是靈活可擴展的單位，由浏覽器轉換為像素值，取決於設計中的字體大小，如果使用值 1em 或 1rem ，它可以被浏覽器轉換為從 16px 到 160px 或其他任意值。浏覽器使用 1px ，那麼 1px 始終顯示為完全 1px。
em 和 rem 的相同點
使用 em 和 rem 單位可以讓我們的設計更加靈活，能夠控制元素整體放大縮小，而不是固定大小
em 和 rem 區別
區別是浏覽器根據誰來轉化成 px 值
rem 單位如何轉化為像素值
當使用 rem 單位，他們轉化為像素大小取決於頁根元素的字體大小，即 html 元素的字體大小。 根元素字體大小乘以你 rem 值。
例如，根元素的字體大小 16px，10rem 將等同於 160px，即 10 x 16 = 160。
em 單位如何轉換為像素值
當使用em單位時，像素值將是 em 值乘以使用 em 單位的元素的字體大小。例如，如果一個 div 有 18px 字體大小，10em 將等同於 180px，即 10 × 18 = 180。
重點理解:
有一個比較普遍的誤解，認為 em 單位是相對於父元素的字體大小。 事實上，根據W3標准 ，它們是相對於使用em單位的元素的字體大小。父元素的字體大小可以影響 em 值，但這種情況的發生，純粹是因為繼承。 讓我們看看為什麼以及如何起作用。
你需要知道的:
根 html 元素將繼承浏覽器中設置的字體大小，除非顯式設置固定值去覆蓋。所以 html 元素的字體大小雖然是直接確定 rem 值，但字體大小可能首先來自浏覽器設置。因此浏覽器的字體大小設置可以影響每個使用 rem 單元以及每個通過 em 單位繼承的值。
總結與 rem 差異 em
上述所有歸結如下:
為什麼使用 rem 單位:
Rem 單位提供最偉大的力量並不僅僅是他們提供一致尺寸而不是繼承。 相反，它給我們的一個途經去獲取用戶的偏好來影響網站中每一處使用rem的元素大小，不再是使用固定的 px 單位。
為此，使用 rem 單位的主要目的應該是確保無論用戶如何設置自己的浏覽器，我們的布局都能調整到合適大小。
為什麼使用 em 單位
em 單位取決於一個font-size值而非 html 元素的字體大小。
為此，em 單位的主要目的應該是允許保持在一個特定的設計元素范圍內的可擴展性。
例如，您可能使用em 值設置導航菜單項的padding、 margin，line-height等值。帶有0.9rem 字體大小的菜單
通過這種方式，如果您更改菜單的字體大小菜單項周圍的間距將在剩余的空間按比例縮放。
總結
以上就是關於css中px、em和rem區別的全部內容了，希望本文的內容對的大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。