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

2021-08-08 04:13:17 字數 2042 閱讀 2976

css單位中分為相對長度單位、絕對長度單位。

今天我們主要講解rem、em、px這些常用單位的區別和用法。

相信對於前端來說px這個單位是大家並不陌生,px這個單位,相容性可以說是相當可以,大家對px的了解肯定是沒有很大的問題的。

使用:1、瀏覽器的預設字型都是16px,那麼1em=16px,以此類推計算12px=0.75em,10px=0.625em,2em=32px;

2、這樣使用很複雜,很難很好的與px進行對應,也導致書寫、使用、視覺的複雜(0.75em、0.625em全是小數點);

3、為了簡化font-size的換算,我們在body中寫入一下**

body  /*  公式16px*62.5%=10px  */
這樣頁面中1em=10px,1.2em=12px,1.4em=14px,1.6em=16px,使得視覺、使用、書寫都得到了極大的幫助。

例子如下:

我是1.6em

執行效果為:

缺點:1、em的值並不是固定的;

2、em會繼承父級元素的字型大小(參考物是父元素的font-size;);

3、em中所有的字型都是相對于父元素的大小決定的;所以如果乙個設定了font-size:1.2em的元素在另乙個設定了font-size:1.2em的元素裡,而這個元素又在另乙個設定了font-size:1.2em的元素裡,那麼最後計算的結果是1.2x1.2x1.2=1.728em

例如:

我是大字型

我是小字型

樣式為

但執行結果small的字型大小為:1.2em*1.2em=1.44em;

如圖:

*寬度高度也是同理

使用:1、瀏覽器的預設字型都是16px,那麼1rem=16px,以此類推計算12px=0.75rem,10px=0.625rem,2rem=32px;

2、這樣使用很複雜,很難很好的與px進行對應,也導致書寫、使用、視覺的複雜(0.75rem、0.625em全是小數點) ;

3、為了簡化font-size的換算,我們在根元素html中加入font-size: 62.5%;

html  /*  公式16px*62.5%=10px  */
這樣頁面中1rem=10px,1.2rem=12px,1.4rem=14px,1.6rem=16px;使得視覺、使用、書寫都得到了極大的幫助;

例子如下:

我是1.6rem=16px

執行效果為:

特點:1、rem單位可謂集相對大小和絕對大小的優點於一身

2、和em不同的是rem總是相對於根元素(如:root{}),而不像em一樣使用級聯的方式來計算尺寸。這種相對單位使用起來更簡單。

3、rem支援ie9及以上,意思是相對於根元素html(網頁),不會像em那樣,依賴於父元素的字型大小,而造成混亂。使用起來安全了很多。

例如:

我是14px=1.4rem我是12px=1.2rem

樣式為:

執行結果:

注意:

這就是我整體對px、em、rem區別的總結,希望對大家有幫助,我會持續進步更新我的知識庫,嘻嘻*_*

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

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

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

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

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

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