rem 單位 和 em 單位

2021-08-16 16:48:48 字數 920 閱讀 7819

首先要知道:rem 和 em 是相對單位;

我們通過**來看 rem 和 em的使用和區別:

em:相對於父級

test 16px

test

test

顯示效果:

我們可以看到,首先我們重置瀏覽器的預設顯示字型大小為16px( 即便預設顯示大小也是16px );

body中的第乙個段落標籤的字型大小也就是16px;

div的字型大小設為 2em ,也就是說div的字型大小是其父級的2倍,父級body是16px,那麼div

的字型大小就是16*2=32px ;

div中的段落p 的字型大小設為2em,也就是說段落p 的字型大小是其父級的2倍,那麼也就是div

字型大小的2倍,是32*2=64px ;

所以說em是相對於其父級的大小單位;

rem是相對於根的大小單位

test 16px

test

test

顯示效果:

我們來看首先我們設定html 這個就是根了,rem就是相對於這個大小的,

body中第乙個段落p的字型大小為16px;

body中div的字型大小我們設定為2rem,那麼就是根的2倍,即 16px * 2=32px;

body中div中的段落p的字型大小我們設定為2rem,那麼就是根的2倍,即16px *2=32px;

總結:em是相對於父級元素的單位

rem是相對於根元素的單位

em和rem 單位的使用

em和rem px em和rem三者的關係 1.px 概念 畫素。相對長度的單位。特點 所有瀏覽器均支援 2.em 概念 是長度的相對單位。特點 em的值不是固定的 會繼承父級元素的字型大小。相對父級的的字型大小。3.rem 概念 css3新增的單位,長度的相對單位,以html元素的字型單位做參考。...

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 是非常有用的單位,因為它可以自動適應使用者所使用的字型。...