徹底弄懂css中單位px和em,rem的區別

時間 2021-06-16 17:32:55

1樓:檀香透窗櫺

1、概念

px:絕對單位,頁面按精確畫素展示。

em:相對單位,基準點為父節點字型的大小,如果自身定義了font-size按自身來計算(瀏覽器預設字型是16px),整個頁面內1em不是一個固定的值。

rem:相對單位,可理解為」root em」, 相對根節點html的字型大小來計算,css3新加屬性,chrome/firefox/ie9+支援。

2、特點

px特點:

1. ie無法調整那些使用px作為單位的字型大小;

2. 國外的大部分**能夠調整的原因在於其使用了em或rem作為字型單位;

3. firefox能夠調整px和em,rem,但是96%以上的中國網民使用ie瀏覽器(或核心)。

em特點 :

1. em的值並不是固定的;

2. em會繼承父級元素的字型大小。

rem特點:

rem是css3新增的一個相對單位(root em,根em),這個單位引起了廣泛關注。區別在於使用rem為元素設定字型大小時,仍然是相對大小,但相對的只是html根元素。

這個單位可謂集相對大小和絕對大小的優點於一身,通過它既可以做到只修改根元素就成比例地調整所有字型大小,又可以避免字型大小逐層複合的連鎖反應。

目前,除了ie8及更早版本外,所有瀏覽器均已支援rem。對於不支援它的瀏覽器,應對方法也很簡單,就是多寫一個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。

擴充套件資料

選擇使用什麼字型單位主要由專案來決定,如果你的使用者群都使用最新版的瀏覽器,那推薦使用rem,如果要考慮相容性,那就使用px,或者兩者同時使用。

無論是臺式還是移動端開發,兩者其實都可以使用,只不過em需要注意繼承關係,並且需要修改多個內容,而rem恰恰相反,所以rem更適合移動式開發。

也就是說,em是以自身父容器為參考物件的,而rem直接以html為參考物件的,在多層巢狀的情況下使用em很容易出現問題。

2樓:孜孜獲源

1.px實際上就是畫素,用px設定字型大小時,比較穩定和精確。但是這種方法存在一個問題,當使用者在瀏覽器中瀏覽我們製作的web頁面時,如果改變了瀏覽器的縮放,這時會使用我們的web頁面佈局被打破。

這樣對於那些關心自己**可用性的使用者來說,就是一個大問題了。因此,這時就提出了使用「em」來定義web頁面的字型。

2.em就是根據基準來縮放字型的大小。em實質是一個相對值,而非具體的數值。

這種技術需要一個參考點,一般都是以的「font-size」為基準。另外,em是相對於父元素的屬性而計算的,如果想計算px和em之間的換算,輸入資料就可以px和em相互計算。

3.em是相對於其父元素來設定字型大小的,這樣就會存在一個問題,進行任何元素設定,都有可能需要知道他父元素的大小。而rem是相對於根元素,這樣就意味著,我們只需要在根元素確定一個參考值。

3樓:育知同創教育

px:px實際上就是畫素,用px設定字型大小時,比較穩定和精確。但是這種方法存在一個問題,當使用者在瀏覽器中瀏覽我們製作的web頁面時,如果改變了瀏覽器的縮放,這時會使用我們的web頁面佈局被打破。

這樣對於那些關心自己**可用性的使用者來說,就是一個大問題了。因此,這時就提出了使用「em」來定義web頁面的字型。

em:em就是根據基準來縮放字型的大小。em實質是一個相對值,而非具體的數值。

這種技術需要一個參考點,一般都是以的「font-size」為基準。如wordpress官方主題twenntytwelve的基準就是14px=1em。

另外,em是相對於父元素的屬性而計算的,如果想計算px和em之間的換算,這個**不錯,輸入資料就可以px和em相互計算。狠擊這裡:px和em換算

rem:

em是相對於其父元素來設定字型大小的,這樣就會存在一個問題,進行任何元素設定,都有可能需要知道他父元素的大小。而rem是相對於根元素,這樣就意味著,我們只需要在根元素確定一個參考值。

瀏覽器的相容性

除了ie6-ie8r,其它的瀏覽器都支援em和rem屬性,px是所有瀏覽器都支援。

因此為了瀏覽器的相容性,可「px」和「rem」一起使用,用"px"來實現ie6-8下的效果,然後使用「rem」來實現代瀏覽器的效果。

4樓:碼匠

px:絕對度量單位,就是畫素

em:相對度量單位,但是計算起來實在費勁。em指的是相對於當前物件內文字的字型尺寸。

如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。換句話說,如果當前div的字型大小是12畫素,那麼1em就是12畫素,如果div字型大小是24畫素,1em就是24畫素。

rem,也是和字型相關的相對度量單位,但是,rem是相對於根元素的字型大小進行設定的,如果html元素中的字型大小設定為24px,那麼針對任意html內的元素設定1rem,均表示的是24px,大大節省了我們計算字型大小的時間。

詳細資料 -> 網頁連結

5樓:匿名使用者

px是你螢幕裝置物理上能顯示出的最小的一個點,這個點不是固定寬度的,不同裝置上點的長寬、比例有可能會不同。假設:你現在用的顯示器上1px寬=1毫米,但我用的顯示器1px寬=兩毫米,那麼你定義一個div寬度為100px,你顯示器上看這個div是10釐米,我顯示器上看是20釐米。

另外一個px點的長寬不一定是1:1的正方形,有的裝置上長寬比是不一樣的。

em尺寸:所有現代瀏覽器下預設字型尺寸是16px,這時1em=16px。然後你人為的把body裡面定義font-size:

12px;(把瀏覽器預設16px改小了),此刻1em=12px,如果0.8em實際等於12px*0.8;em的用處是你要整個網頁字型統一變大變小你只要改body裡面font-size的值就行了。

另外:em會繼承父元素的字型大小,比如:

body

pspan

我大小為16px;

段落文字大小為12px(16*0.75);

我大小是2em,即24px,這裡是相對父級字號*2的,而不是相對body裡面的16px

rem,上面你看到了,em相對父級,巢狀一多了算字型到底多大就很操蛋,所以有了rem(瀏覽器支援還不是很理想),他只相對html或body的字型尺寸(預設還是16px,除非你自己用font-size定義為其他),沒有了繼承父級尺寸這個關係。

6樓:北極雪

如果p裡面再巢狀一個span元素,你要定義他的字號大小為24px,你先要算出目前p的字號實際大小為12px,然後乘以2才能得到span的正確字號,即:span

這樣巢狀一多了,運算元元素的字號是很不直觀的,不知道css的這個設計是出於什麼目的或是設計時是不是沒注意到這個問題會帶來計算上的麻煩,於是後來又有了rem單位。

rem單位就簡單多了,只針對html根元素,比如body裡面你定了font-size: 24px;(1em=24px;),那麼無論你在哪個子元素上,你想要個12px的字型,只用定義font-size: 0.

5em;即可,你不用去擔心它上級元素的字號是16px還是24px;

7樓:阿里巴巴廣州授權渠道商陳生

兩塊錢解決你的問題。px 是畫素,具體效果看起來是同等單位最小的;em 是字元的一個佔位寬度,具體效果看起來是同等單位最大的;rem 半個字串佔位寬度(好比中文文字中的空格佔位一樣,比文字小一半)。

徹底弄懂css中單位px和em,rem的區別

8樓:雨中旳星辰

px畫素(pixel)。相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。

em是相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。

任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。

那麼12px=0.75em,10px=0.625em。

為了簡化font-size的換算,需要在css中的body選擇器中宣告font-size=62.5%,這就使em值變為 16px*62.5%=10px, 這樣12px=1.

2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10,然後換上em作為單位就行了。

em特點

1. em的值並不是固定的;

2. em會繼承父級元素的字型大小。

所以我們在寫em的時候,需要注意兩點:

1. body選擇器中宣告font-size=62.5%;

2. 將你的原來的px數值除以10,然後換上em作為單位;

3. 重新計算那些被放大的字型的em數值。避免字型大小的重複宣告。

rem是css3新增的一個相對單位(root em,根em),這個單位引起了廣泛關注。這個單位與em有什麼區別呢?區別在於使用rem為元素設定字型大小時,仍然是相對大小,但相對的只是html根元素。

這個單位可謂集相對大小和絕對大小的優點於一身,通過它既可以做到只修改根元素就成比例地調整所有字型大小,又可以避免字型大小逐層複合的連鎖反應。目前,除了ie8及更早版本外,所有瀏覽器均已支援rem。

9樓:匿名使用者

px是固定畫素,em是相對父元素字型大小的百分比,比如div設成15px,div的子節點1em就是15px,2em就是30px。

rem和em差不多,但是是相對於html元素(文件根元素document.documentelement)而不是父元素。

10樓:抗雙路才捷

px特點

1.ie無法調整那些使用px作為單位的字型大小;

2.國外的大部分**能夠調整的原因在於其使用了em或rem作為字型單位;

3.firefox能夠調整px和em,rem,但是96%以上的中國網民使用ie瀏覽器(或核心)。

px畫素(pixel)。相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。(引自css2.0手冊)

em是相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。(引自css2.0手冊)

任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合:

1em=16px。那麼12px=0.75em,10px=0.

625em。為了簡化font-size的換算,需要在css中的body選擇器中宣告font-size=62.5%,這就使em值變為

16px*62.5%=10px,

這樣12px=1.2em,

10px=1em,

也就是說只需要將你的原來的px數值除以10,然後換上em作為單位就行了。

em特點

1.em的值並不是固定的;

2.em會繼承父級元素的字型大小。

所以我們在寫css的時候,需要注意兩點:

1.body選擇器中宣告font-size=62.5%;

2.將你的原來的px數值除以10,然後換上em作為單位;

3.重新計算那些被放大的字型的em數值。避免字型大小的重複宣告。

也就是避免1.2

*1.2=

1.44的現象。比如說你在#content中宣告瞭字型大小為1.2em,那麼在宣告p的字型大小時就只能是1em,而不是1.2em,

因為此em非彼em,它因繼承#content的字型高而變為了1em=12px。

rem特點

rem是css3新增的一個相對單位(root

em,根em),這個單位引起了廣泛關注。這個單位與em有什麼區別呢?區別在於使用rem為元素設定字型大小時,仍然是相對大小,但相對的只是html根元素。

這個單位可謂集相對大小和絕對大小的優點於一身,通過它既可以做到只修改根元素就成比例地調整所有字型大小,又可以避免字型大小逐層複合的連鎖反應。目前,除了ie8及更早版本外,所有瀏覽器均已支援rem。對於不支援它的瀏覽器,應對方法也很簡單,就是多寫一個絕對單位的宣告。

這些瀏覽器會忽略用rem設定的字型大小。

css中px和em有什麼區別,徹底弄懂css中單位px和em,rem的區別

育知同創教育 px px實際上就是畫素,用px設定字型大小時,比較穩定和精確。但是這種方法存在一個問題,當使用者在瀏覽器中瀏覽我們製作的web頁面時,如果改變了瀏覽器的縮放,這時會使用我們的web頁面佈局被打破。這樣對於那些關心自己 可用性的使用者來說,就是一個大問題了。因此,這時就提出了使用 em...

css樣式中a visited a active 能幫我解釋

你的意思應該是 多個a標籤需要使用不同的 動態樣式是吧 第一種 給a標籤一個id或者class,然後在css裡給id或class使用偽類 或者css link active visited hover 不同的a,給一個不同的id或者class,這樣就可以不一樣了,如果有部分是一樣的,那麼就使用相同的...

CSS中的大於號表示什麼意思,css中的大於號是什麼意思 有何作用

我的人生 你說的這個是關係選擇符 語法 e f 說明 選擇所有作為e元素的子元素f。與包含選擇符不同的是,子選擇符只能命中子元素,而不能命中孫輩。 葉落紅塵 表示是父級標籤的子級,子標籤下的不包括 表示標籤的結束符,大於號要表示使用 css中的大於號是什麼意思 有何作用 css中 表示子元素選擇器 ...