rem與em的使用和區別

2022-07-09 21:06:12 字數 1282 閱讀 1144

區別是:瀏覽器根據誰來轉化成px值。

當使用rem單位,轉換為畫素大小取決於根元素的字型大小,即html元素的字型大小。 

有乙個比較普遍的誤解,認為em單位是相對于父元素的字型大小。事實上,根據w3c標準,

它們是相對於使用em單位的元素的字型的大小。

父元素的字型大小可以影響 em 值,但這種情況的發生,純粹是因為繼承。

em單位的繼承效果:

使用em單位存在繼承的時候,每個元素將自動繼承其父元素的字型大小,繼承的效果只能被明確的字型單位覆蓋,比如px和vw

只要父級元素上面一直有font-size為em單位,則會一直繼承,但假如自己設定了font-size的單位為px的時候,則會直接使用自己的px單位的值

em繼承的例子:

如果我們的根元素字型大小為16px(通常是預設值),乙個子元素div裡面padding值為1.5em,該div將從父元素繼承16px。因此padding會翻譯成24px,即1.5 x 16 = 24px。

看圖說話。padding:24

如果我們多加乙個div2來包裹原來的div,然後設定其字型大小為1.25em呢?

我們的div2繼承根元素字型大小16px,並乘以他的1.25rem的字型大小。這將設定div2字型大小為 1.25 x 16 = 20px

!!!現在我們最初的那個div,不再直接從根元素繼承那個16px,而是繼承包裹著它 的  div2 中繼承字型大小,即20px。

那麼我們現在的div內的padding就變成了1.5 x 20 = 30px

這個padding:30 就是這麼來的

那我們再來回顧一下,

只有父級元素的font-size 一直以em作為單位,則子元素會一直繼承。但假如!!!自己!!!設定的font-size的單位為px的時候,則會直接使用自己的px單位的值。

我這裡的div1仍然是自己的20px  

rem與em的區別 結合使用rem與em

注意 谷歌瀏覽器最低支援的font size為12px 火狐和ie瀏覽器沒限制 rem 作用 適用不同解析度的頁面 相對於根元素html 給html設定乙個font size 所有元素的長度單位都用rem 倍數關係 若html設定的font size 10px 那麼2rem就是20px 好處 不同解...

em與rem的區別與使用

一 區別 1 em em是一種相對長度單位,相對於自身元素的字型大小大小,如果沒有設定即參照父容器的字型大小大小或瀏覽器預設字型大小大小。舉例 如乙個div box的寬度設定為 box,其字型大小大小 box,則此div的寬度為140px。2 rem rem是css3的新標準也是一種相對長度單位,其...

em與rem的區別與使用

1 em em是一種相對長度單位,相對於自身元素的字型大小大小,如果沒有設定即參照父容器的字型大小大小或瀏覽器預設字型大小大小。舉例 如乙個div box的寬度設定為 box,其字型大小大小 box,則此div的寬度為140px。2 rem rem是css3的新標準也是一種相對長度單位,其相對於ht...