css當中px em rem以及百分比之間的區別

2021-08-02 21:57:16 字數 1255 閱讀 1222

一、px

的特點

1. ie無法調整那些使用

px作為單位的字型大小;

2. 國外的大部分**能夠調整的原因在於其使用了em或

rem作為字型單位;

3. firefox能夠調整px和

em,rem,但是有大部分的國產瀏覽器使用

ie核心。

px畫素(

pixel

)。相對長度單位。畫素

px是相對於顯示器螢幕解析度而言的,可以定寬、定高。(

引自css2.0手冊)

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

css2.0手冊)

任意瀏覽器的預設字型高都是16px

。所有未經調整的瀏覽器都符合

: 1em=16px

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

。為了簡化

font-size

的換算,需要在

css中的

body

選擇器中宣告body

注意:選擇使用什麼字型單位主要由你的專案來決定,如果你的使用者群都使用最新版的瀏覽器,那推薦使用rem

,如果要考慮相容性,那就使用

px,或者兩者同時使用。

四、百分比的特點

1、百分比(%

)繼承的是父級的

width

和height

的屬性;例如:

<

body

>

<

div 

class=

"parent"

>

<

footer 

class=

"child"

>

<

div 

class=

>

div>

footer

>

div>

body

>

設定選擇器為.parent

的樣式:

.parent{

width:100px;

height:100px;

子元素footer

的樣式:

.child{

width:80%;

height:70%;

那麼,子元素footer

的width

就是80px,height

就是70px;

區別css單位px em rem

一般瀏覽器預設1em 16px,通過設定font size大小來代表如 16px 0.625 10px,其則代表1em 10px,直接上 注釋的樣式為瀏覽器預設 1em 16px 的長寬 在進行轉換之前,我們一定要檢視瀏覽器預設字型 最小 大小,如chrome瀏覽器,預設字型最小為12px,所以即使...

CSS尺寸單位 px em rem 詳解

在css中,尺寸單位分為兩類 相對長度單位和絕對長度單位。相對長度單位按照不同的參考元素,又可以分為字型相對單位和視窗相對單位。字型相對單位有 em ex ch rem 視窗相對單位有 vw vh vmin vmax幾種。絕對長度單位則是固定尺寸,它們採用的是物理度量單位 cm mm in px p...

css的px,em,rem的區別

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