css中px、em和rem有什么區(qū)別

這篇文章主要介紹“css中px、em和rem有什么區(qū)別”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“css中px、em和rem有什么區(qū)別”文章能幫助大家解決問(wèn)題。

前言

em 和 rem 都是靈活可擴(kuò)展的單位，由瀏覽器轉(zhuǎn)換為像素值，取決于設(shè)計(jì)中的字體大小，如果使用值 1em 或 1rem ，它可以被瀏覽器轉(zhuǎn)換為從 16px 到 160px 或其他任意值。瀏覽器使用 1px ，那么 1px 始終顯示為完全 1px。

em 和 rem 的相同點(diǎn)

使用 em 和 rem 單位可以讓我們的設(shè)計(jì)更加靈活，能夠控制元素整體放大縮小，而不是固定大小

em 和 rem 區(qū)別

區(qū)別是瀏覽器根據(jù)誰(shuí)來(lái)轉(zhuǎn)化成 px 值

rem 單位如何轉(zhuǎn)化為像素值

當(dāng)使用 rem 單位，他們轉(zhuǎn)化為像素大小取決于頁(yè)根元素的字體大小，即 html 元素的字體大小。 根元素字體大小乘以你 rem 值。

例如，根元素的字體大小 16px，10rem 將等同于 160px，即 10 x 16 = 160。

em 單位如何轉(zhuǎn)換為像素值

當(dāng)使用em單位時(shí)，像素值將是 em 值乘以使用 em 單位的元素的字體大小。例如，如果一個(gè) div 有 18px 字體大小，10em 將等同于 180px，即 10 × 18 = 180。

重點(diǎn)理解:

有一個(gè)比較普遍的誤解，認(rèn)為 em 單位是相對(duì)于父元素的字體大小。 事實(shí)上，根據(jù)W3標(biāo)準(zhǔn) ，它們是相對(duì)于使用em單位的元素的字體大小。父元素的字體大小可以影響 em 值，但這種情況的發(fā)生，純粹是因?yàn)槔^承。 讓我們看看為什么以及如何起作用。

你需要知道的:

根 html 元素將繼承瀏覽器中設(shè)置的字體大小，除非顯式設(shè)置固定值去覆蓋。所以 html 元素的字體大小雖然是直接確定 rem 值，但字體大小可能首先來(lái)自瀏覽器設(shè)置。因此瀏覽器的字體大小設(shè)置可以影響每個(gè)使用 rem 單元以及每個(gè)通過(guò) em 單位繼承的值。

總結(jié)與 rem 差異 em

上述所有歸結(jié)如下:

1. rem 單位翻譯為像素值是由 html 元素的字體大小決定的。 此字體大小會(huì)被瀏覽器中字體大小的設(shè)置影響，除非顯式重寫(xiě)一個(gè)具體單位。
   

2. em 單位轉(zhuǎn)為像素值，取決于他們使用的字體大小。 此字體大小受從父元素繼承過(guò)來(lái)的字體大小，除非顯式重寫(xiě)與一個(gè)具體單位。
   

為什么使用 rem 單位:

Rem 單位提供最偉大的力量并不僅僅是他們提供一致尺寸而不是繼承。 相反，它給我們的一個(gè)途經(jīng)去獲取用戶的偏好來(lái)影響網(wǎng)站中每一處使用rem的元素大小，不再是使用固定的 px 單位。
為此，使用 rem 單位的主要目的應(yīng)該是確保無(wú)論用戶如何設(shè)置自己的瀏覽器，我們的布局都能調(diào)整到合適大小。

為什么使用 em 單位

em 單位取決于一個(gè)font-size值而非 html 元素的字體大小。

為此，em 單位的主要目的應(yīng)該是允許保持在一個(gè)特定的設(shè)計(jì)元素范圍內(nèi)的可擴(kuò)展性。

例如，您可能使用em 值設(shè)置導(dǎo)航菜單項(xiàng)的padding、 margin，line-height等值。帶有0.9rem 字體大小的菜單

通過(guò)這種方式，如果您更改菜單的字體大小菜單項(xiàng)周?chē)拈g距將在剩余的空間按比例縮放。

關(guān)于“css中px、em和rem有什么區(qū)別”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。