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

2021-06-16 17:32:44 字數 5160 閱讀 8589

1樓:

px單位名稱為畫素,相對長度單位,畫素(px)是相對於顯示器螢幕解析度而言的國內推薦;

em單位名稱為相對長度單位。相對於當前物件內文字的字型尺寸,國外使用比較多;擴充套件閱讀:html em標籤,html em強調標籤

pt單位名稱為點(point),絕對長度單位一般老版本的table使用長度大小單位但是現在基本上沒有使用。

html單位簡短介紹:

px 畫素pixel;相對長度單位。

pt 點(point);絕對長度單位

em 相對長度單位,這裡em與html 標籤的"em"拼寫完全相同,而這裡em作為單獨文字單位。

1. 以前ie無法調整那些使用px作為單位的字型大小,但現在幾乎ie都支援 在這裡也推薦使用px作為單位;

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

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

px畫素(pixel)。相對長度單位。畫素px是相對於顯示器螢幕解析度而言的,qq截圖也是使用px作為長度寬度單位。

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

2樓:純潔的小樹

px是固定值。em是相對於父元素的大小來的!

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

3樓:檀香透窗櫺

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很容易出現問題。

4樓:孜孜獲源

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

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

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

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

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

5樓:育知同創教育

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」來實現代瀏覽器的效果。

6樓:碼匠

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

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

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

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

詳細資料 -> 網頁連結

7樓:匿名使用者

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定義為其他),沒有了繼承父級尺寸這個關係。

8樓:北極雪

如果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;

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

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

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

10樓:育知同創教育

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

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

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

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

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

前端css中單位em和px的區別

11樓:四川原始碼時代科技****

前端css中em和px都是表示長度的單位,除了這兩者,css 還有幾個不同的單位用於表示長度。而em和px的區別就在於:

1.em指的是相對長度,相對單位長度指定了一個長度相對於另一個長度的屬性。對於不同的裝置相對長度更適用。相對長度還有:ex、ch、rem、vw、%等等。

2.px是絕對長度單位,它是一個固定的值,它反應一個真實的物理尺寸。絕對長度單位視輸出介質而定,不依賴於環境(顯示器、解析度、作業系統等)。

絕對長度還有:cm、mm、in、pt等等。

如何用css3混合和px計算寬度

比如寬度copy 為父元素的50 加上5畫素 width calc 50 5px 要注意加號 或減號 兩邊一定要加上空格!再比如寬度是父元素的三分之一再減去3畫素 width calc 100 3 3px 乘號 或除號 兩邊可以不加空格,但建議最好加上!此外必須注意這種方法屬於css3標準,不是什麼...

css中id選擇器和類選擇器中間逗號隔開

用逗號隔開的選擇器是說這若干個用逗號隔開的選擇器都平等地版使用後面大擴號裡規定的樣權式。如 id a,class a 意思是 id a和.class a裡的字型顏色都適用紅色可以理解為逗號隔開的選擇器地位是平等的。css選擇器中 類和id選擇器的區別 類選擇器是用來抄匹配類似下面這樣的 baihtm...

CSS中的ID選擇器和類選擇器有什麼區別?什麼時候用ID選擇器?什麼時候用類選擇器

id是唯一的,類可多個使用 id在用一頁面中 原則上只可以出現一次,類可以出現多次 一個標籤只可以有一個id,而可以有多個類 id只能是一對一的使用,但是類可以很多一起使用 id是唯一標示可,方便js引用,class具有普遍性 css中類別選擇器和id選擇器有什麼區別?簡單的說 比如 style1 ...