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

2021-09-24 19:49:06 字數 822 閱讀 1335

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

在 css 中,em 是非常有用的單位,因為它可以自動適應使用者所使用的字型。

em是自適應當前使用字型大小的,1em等於當前字型大小,2em等於兩倍字型大小(font-size)

1.子元素字型大小的em是相對于父元素字型大小

2.元素的width/height/padding/margin用em的話是相對於該元素的font-size

舉個例子:

父親 兒子 孫子

div 是父級元素 p是子級元素 span是孫子元素

必須知道谷歌瀏覽器的最小字型是12px; ,也就是1em預設為12px,如果最外層的父元素直接把font-size設為1.5em,那麼該元素的字型大小為18px(121.5)。

rem單位適用於做移動端頁面,rem表示「root em」,字面上指的是根元素的em大小。

我們知道在web文件的上下文中,根元素就是你的html元素。如果沒有重置,html預設font-size:16px。

rem是全部的長度都相對於根元素,根元素是誰?元素。

通常做法是給html元素設定乙個字型大小,然後其他元素的長度單位就為rem。

html

div

做響應式**的時候我推薦使用rem,因為它只是相對於根元素變化,而em相對於太多了父元素了。有點難計算了

隨便提下px:px是固定的畫素,它不會隨著頁面變化而改變大小的。

css中單位em和rem

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

css中單位em和rem

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

css中單位em和rem

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