一、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是相對於顯示器螢幕解析度而言的...