css中px、em和rem的有哪些區(qū)別-創(chuàng)新互聯(lián)

小編給大家分享一下css中px、em和rem的有哪些區(qū)別，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

10年積累的網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有饒平免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

前言

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

em 和 rem 的相同點

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

em 和 rem 區(qū)別

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

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

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

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

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

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

重點理解:

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

你需要知道的:

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

總結(jié)與 rem 差異 em

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

rem 單位翻譯為像素值是由 html 元素的字體大小決定的。此字體大小會被瀏覽器中字體大小的設(shè)置影響，除非顯式重寫一個具體單位。
em 單位轉(zhuǎn)為像素值，取決于他們使用的字體大小。此字體大小受從父元素繼承過來的字體大小，除非顯式重寫與一個具體單位。

為什么使用 rem 單位:

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

為什么使用 em 單位

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

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

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

通過這種方式，如果您更改菜單的字體大小菜單項周圍的間距將在剩余的空間按比例縮放。

總結(jié)

rem 和 em 單位是由瀏覽器基于你的設(shè)計中的字體大小計算得到的像素值。
em 單位基于使用他們的元素的字體大小。
rem 單位基于 html 元素的字體大小。
em 單位可能受任何繼承的父元素字體大小影響
rem 單位可以從瀏覽器字體設(shè)置中繼承字體大小。
使用 em 單位應(yīng)根據(jù)組件的字體大小而不是根元素的字體大小。
在不需要使用em單位，并且需要根據(jù)瀏覽器的字體大小設(shè)置縮放的情況下使用rem。
使用rem單位，除非你確定你需要 em 單位，包括對字體大小。
媒體查詢中使用 rem 單位
不要在多列布局中使用 em 或 rem -改用 %。
不要使用 em 或 rem，如果縮放會不可避免地導(dǎo)致要打破布局元素。

以上是“css中px、em和rem的有哪些區(qū)別”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：css中px、em和rem的有哪些區(qū)別-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://bm7419.com/article48/dgdiep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、虛擬主機(jī)、ChatGPT、企業(yè)建站、營銷型網(wǎng)站建設(shè)、定制網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容