css中px,em,rem的區別

2021-08-28 22:19:23 字數 743 閱讀 5862

px,指畫素,相對長度單位,是相對於螢幕解析度而言的

特點:比較穩定和精確

ie無法調整使用px作為單位的網頁的字型大小

em,相對長度單位,相對於其父級定義的大小

特點:em的值並不是固定的

em會繼承父級元素的字型大小,如果父級沒有設定,會繼續向上尋找,直到瀏覽器的預設字型大小

舉例:

明天會更好

明天會更好

將body的字型大小設定為16px,div的字型大小設定為20px,span的字型大小設定為2em,最終顯示效果如下:

span裡面字型的大小為40px,為div設定的20px的2倍,p標籤裡的字型大小繼承body裡的大小,為16px

rem是css3中新增的字型單位,也是相對單位,與em不同的是,rem相對於根元素,通過改變根元素html設定的字型大小,來改變其他元素的字型大小,減少了em作為單位的繁瑣計算

因為瀏覽器的預設字型大小是16px,所以在使用rem單位時,一般給根元素html的font-size設定為62.5%,即10/16 * 100% = 62.5%,這樣1rem = 10px,方便給其他元素設定大小。這樣設定乙個24px大小的字型時,只需寫2.4rem,以此類推

rem也更適用於移動端適配

注意:rem不支援在ie8及更早的版本中使用,可使用px作為代替

談談css中px,em,rem的區別

相對長度單位,相對於顯示器螢幕解析度而言。特點 一般使用px來設定文字 因為比較精確和穩定,但如果使用者修改瀏覽器文字尺寸,會打破整個頁面布局。這時候em出現了 相對長度單位,相對於當前物件內文字的字型尺寸。若沒有設定物件文字的字型尺寸,則預設為瀏覽器字型尺寸。特點 任意瀏覽器的預設字型尺寸為16p...

區別CSS單位中的px,em,rem

px畫素 pixel 相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。引自css2.0手冊 px特點 1.ie無法調整那些使用px作為單位的字型大小 2.國外的大部分 能夠調整的原因在於其使用了em或rem作為字型單位 3.firefox能夠調整px和em,rem,但是96 以上的中國網民使用...

css中單位px,em,rem的區別

1,px畫素 pixel 相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。2,em是相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸 3,rem為元素設定字型大小時,仍然是相對大小,但相對的只是html根元素 4,任意瀏覽器的預...