css中px、em和rem使用詳解

相信每位前端工程師們都有這麼一個體會，國內的設計師大都喜歡用px，而國外的網站大都喜歡用em和rem，那麼三者有什麼區別，又各自有什麼優劣呢？下面這篇文章小編就來給大家詳細介紹關於css中px、em和rem的區別，需要的朋友可以參考借鑒，下面來一起看看吧。

前言

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 單位的元素的字體大小。例如，如果一個 p 有 18px 字體大小，10em 將等同於 180px，即 10 × 18 = 180。

重點理解:

有一個比較普遍的誤解，認為 em 單位是相對於父元素的字體大小。 事實上，根據W3標準 ，它們是相對於使用em單位的元素的字體大小。父元素的字體大小可以影響 em 值，但這種情況的發生，純粹是因為

繼承。 讓我們看看為什麼以及如何運作。

你需要知道的:

根 html 元素將繼承瀏覽器中設定的字體大小，除非明確設定固定值去覆蓋。所以 html 元素的字體大小雖然是直接確定 rem 值，但字體大小可能首先來自瀏覽器設定。因此瀏覽器的字體大小設定可以影響每個使用 rem 單元以及每個透過 em 單位繼承的值。

總結與rem 差異em

上述所有歸結如下:

1. rem 單位翻譯為像素值是由html 元素的字體大小決定的。 此字體大小會被瀏覽器中字體大小的設定影響，除非明確重寫特定單位。

2. em 單位轉為像素值，取決於他們使用的字體大小。 此字體大小受從父元素繼承過來的字體大小，除非明確重寫與一個具體單位。

為什麼使用 rem 單位:

Rem 單位提供最偉大的力量並不僅僅是他們提供一致尺寸而不是繼承。 相反，它給我們的一個途經去獲取用戶的偏好來影響網站中每一處使用rem的元素大小，不再是使用固定的 px 單位。

為此，使用 rem 單位的主要目的應該是確保無論使用者如何設定自己的瀏覽器，我們的佈局都能調整到適當大小。

為什麼使用 em 單位

em 單位取決於一個

font-size值而不是 html 元素的字體大小。

為此，em 單位的主要目的應該是允許保持在一個特定的設計元素範圍內的可擴展性。

例如，您可能使用em 值設定

導覽選單項目的padding、 margin，line-height等值。帶有0.9rem 字體大小的選單

透過這種方式，如果您變更選單的字體大小選單項目周圍的間距將在剩餘的空間中按比例縮放。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

CSS怎麼處理瀏覽器的預設樣式

CSS實作帶箭頭流程可見進度條

#

以上是css中px、em和rem使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！