1. 程式人生 > >px和em的區別

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 */