css中em和rem的區別

2022-02-20 07:47:51 字數 1391 閱讀 6288

在css中單位長度用的最多的是px、em、rem,這三個的區別是:

px是固定的畫素,一旦設定了就無法因為適應頁面大小而改變。

em和rem相對於px更具有靈活性,他們是相對長度單位,意思是長度不是定死了的,更適用於響應式布局。

對於em和rem的區別一句話概括:em相對于父元素,rem相對於根元素。

rem中的r意思是root(根源),這也就不難理解了。

em

上**:

我是父元素div

我是子元素p

我是孫元素span

div 

p span

結果如下:

鞏固測驗:你能說出孫元素span的font-size和width嗎?

答案:我猜你會說10px、100px,哈哈,其實邏輯上是正確的,但是如果你是chrome瀏覽器我不得不告訴你應該是12px、120px。因為chrome設定的最小

字型大小為12px,意思就是說低於12px的字型大小會被預設為12px,當然這一尬境可以由css3解決,這裡就不多說了。

chrome預設的字型大小是12px,也就是1em預設為12px,如果最外層的父元素直接把font-size設為1.5em,那麼該元素的字型大小為18px(12*1.5)。

rem

rem是全部的長度都相對於根元素,根元素是誰?元素。通常做法是給html元素設定乙個字型大小,然後其他元素的長度單位就為rem。

上**:(html**如上,只是把css**的元素長度單位變了)

所以你可以說出span的font-size具體值嗎?

當用rem做響應式時,直接在**中改變html的font-size那麼用rem作為單位的元素的大小都會相應改變,很方便。

看到這裡我想我們都更深刻的體會了em和rem的區別(參照物不同)。

總結

在做專案的時候用什麼單位長度取決於你的需求,我一般是這樣的:

畫素(px):用於元素的邊框或定位。

em/rem:用於做響應式頁面,不過我更傾向於rem,因為em不同元素的參照物不一樣(都是該元素父元素),所以在計算的時候不方便,相比之下rem就只有乙個參照物(html元素),這樣計算起來更清晰。

css中rem和em的區別

國內的設計師大都喜歡用px,而國外的 大都喜歡用em和rem,那麼三者有什麼區別,又各自有什麼優劣呢?px特點 1.ie無法調整那些使用px作為單位的字型大小 2.國外的大部分 能夠調整的原因在於其使用了em或rem作為字型單位 3.firefox能夠調整px和em,rem,但是96 以上的中國網民...

css中單位em和rem之間的區別

對於em和rem的區別一句話概括 em相對于父元素,rem相對於根元素。在 css 中,em 是非常有用的單位,因為它可以自動適應使用者所使用的字型。em是自適應當前使用字型大小的,1em等於當前字型大小,2em等於兩倍字型大小 font size 1.子元素字型大小的em是相對于父元素字型大小 2...

css中單位em和rem

w3cschool中給出css中尺寸單位如下 單位描述 百分比 in英吋 cm厘公尺 mm公釐 em1em 等於當前的字型尺寸。2em 等於當前字型尺寸的兩倍。例如,如果某元素以 12pt 顯示,那麼 2em 是24pt。在 css 中,em 是非常有用的單位,因為它可以自動適應使用者所使用的字型。...