px和em的區別
px和em都是長度單位,區別是,px的值是固定的,指定是多少就是多少,計算比較容易。em得值不是固定的,並且em會繼承父級元素的字型大小。
任意瀏覽器的預設字型高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。
為了簡化計算,在css中的body選擇器中宣告Font-size=62.5%,這就使em值變為16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10,然後換上em作為單位就行了。
就像這樣:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{Font-size:62.5%}
.div_px{font-size:10px; border:1px red solid;width:120px; height:20px}
.div_em{font-size:1em; border:0.1em red solid;width:12em; height:2em}
</style>
</head>
<body >
<div class="div_px" >1、這裡是div_px</div><br/>
<div class="div_em" >2、這裡是div_em</div><br/>
<br/>
</body>
</html>
這兩個div基本是一樣的。
但是,如果僅僅是這樣,那就好辦了。直接替換就好了。
‘em會繼承父級元素的字型大小’這條,要了親命了。。。
比如這樣的一個頁面:
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
body{Font-size:62.5%}
.div_out{font-size:1em; border:1px red solid;width:12em; height:4em }
.div_in{ font-size:1em; border:1px blue solid;width:12em; height:4em }
</style>
</head>
<body>
<div class="div_out" >
3、這是div_out
<div class="div_in" >
4、這是div_in
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/>
<div class="div_in" >
5、這是在外面的div_in
</div>
</body>
</html>
這裡有3個div,3和4是套在一起的,5是作對比的。
現在的效果是這樣的:
恩,看起來這幾個div效果是一樣的,div_out和div_in的設定,font-size都是1em,所以繼承沒有表現出來。
通過檢測,3和4的字型都是10px,長度都是122px,寬度都是42px。(設定了border,所以多了2px)
現在改一下:
.div_out{font-size:1.5em; border:1px red solid;width:12em; height:4em }
效果是這樣的
很明顯,前兩個div變大了,說明。。。
紅框的div_out,由於font-size設定了1.5em,真實字型大小是10*1.5=15px,寬度12*10*1.5=180px;高度4*10*1.5=60px (沒有計算border)
樣式div_in沒有做更改,font-size仍然是1em,但是巢狀在3裡面的4號div和5效果不一樣,4繼承了div_out。
再來一個:
.div_out{font-size:1.5em; border:1px red solid;width:12em; height:4em }
.div_in{font-size:1.5em; border:1px blue solid; width:12em; height:4em }
這次把兩個樣式的font-size都設定為1.5em。看看效果。
這是為什麼呢。。
3號div真實字型大小是10*1.5=15px,寬度12*10*1.5=180px;高度4*10*1.5=60px (沒有計算border)
5號div真實字型大小是10*1.5=15px,寬度12*10*1.5=180px;高度4*10*1.5=60px (沒有計算border)
4號div真實字型大小是10*1.5*1.5=22.5px,寬度12*10*1.5*1.5=270px;高度4*10*1.5*1.5=90px (沒有計算border)
rem是基於根節點(比如html)的字型大小進行計算的。
rem的瀏覽器支援
目前大多數瀏覽器都支援rem單位的字型大小,不過,要想相容IE7和IE8,你還是需要使用px來做單位。寫法如下:
html { font-size: 62.5%; }
p { font-size: 15px; font-size: 1.5rem; } /* =15px */