em與rem的區別與使用

2021-08-20 08:35:03 字數 883 閱讀 3684

一:區別

(1)em:em是一種相對長度單位,相對於自身元素的字型大小大小,如果沒有設定即參照父容器的字型大小大小或瀏覽器預設字型大小大小。

舉例:如乙個div#box的寬度設定為#box,其字型大小大小#box,則此div的寬度為140px。

(2)rem: rem是css3的新標準也是一種相對長度單位,其相對於html根標籤的字型大小大小。

舉例: 如有css: html,此根標籤內有元素div#box的寬度為:#box,則此div的寬度            換算成畫素則為140px。

二:rem 的使用:

使用場景:一般移動端的ui設計稿的寬度分為640px,和750px兩種,但是要想使用乙份**就適配所有螢幕,就必須使用相對單位,這時候使用rem是最好的選擇。

使用方法:我們將ui設計稿人為均分成幾等份,使用**查詢判斷螢幕的大小,針對判斷出的每一種螢幕大小,給其html根元素的字型大小大小設定為為均分後的每一等份的大小。如:

ui設計稿寬度為640px,我們將ui設計稿均分為20等份,那麼我們就可以通過**查詢,給320px的螢幕設定html根元素的字型大小大小為16px(320/20),給640px大小的螢幕設定html根元素字型大小大小為32px(640/20),則我們在後續書寫**的時候,ui設計稿上的乙個div的盒子寬度為160px,我們使用rem單位將其表示為width:5rem,則此盒子無論在320px的螢幕下還是在640px的螢幕下都將顯示為螢幕的四1/4的寬度。

三:簡便方法:

我們在使用rem時,每乙個元素的大小都將從設計稿的px轉換為rem相對單位,非常麻煩。遇到不能整除的數值還會導致最後頁面數值的不精確,在這種情況下我們,可以使用**開發的flexible.js外掛程式,配合開發工具vs code的cssrem外掛程式,可避免做**查詢與數值的轉換。(前者避免**查詢,後者避免做數值轉換)。

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的新標準也是一種相對長度單位,其相對於ht...

rem與em的使用和區別

區別是 瀏覽器根據誰來轉化成px值。當使用rem單位,轉換為畫素大小取決於根元素的字型大小,即html元素的字型大小。有乙個比較普遍的誤解,認為em單位是相對于父元素的字型大小。事實上,根據w3c標準,它們是相對於使用em單位的元素的字型的大小。父元素的字型大小可以影響 em 值,但這種情況的發生,...