CSS px、em和rem單位

admin發表於2018-05-24
CSSREM

一.px：

px（畫素）是pixel簡寫。

它是一個相對單位長度，比如對於同一個顯示器，1024x768分辨和800x600解析度下同等畫素文字，看起來大小也是不同的，再比如同一個解析度，一個大型的LED廣告牌和一個普通顯示器，文字大小也是不同的；和em相比，它也算是一個固定的單位長度，畢竟規定12px，它就是12px，畫素值不會變化。

通常情況下，瀏覽器的預設字型大小是16px。

二.em:

它是相對單位長度，它並沒有固定的值，它的大小是由當前元素內文字字型大小決定的。

如果當前元素的字型是16px，那麼1em=16px。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style type="text/css"> 
ul li{
  list-style-type:none; 
} 
.em{
  font-size:2em;
} 
.px{
  font-size:32px; 
} 
</style> 
</head> 
<body> 
<ul> 
  <li class="em">螞蟻部落一</li> 
  <li class="px">螞蟻部落二</li> 
</ul> 
</body> 
</html>

預設情況下，瀏覽器的預設字型大小是16px，所以2em=32px。

三.rem（css3新增）:

它和em非常的類似，都是相對單位，但是參考物件不同。

em是相對於當前物件文字的字型大小，如果物件內字型的大小是12px，那麼1em=12px。

rem是相對於根元素html的字型大小的，從名稱也能夠看的出來，rem是"font size of the root element"的縮寫。

使用em，首先要知道當前元素的字型大小，使用rem則只需要參考根元素的字型大小即可。

瀏覽器相容:

（1）.IE8以上瀏覽器支援此屬性。

（2）.谷歌瀏覽器支援此屬性。

（3）.火狐瀏覽器支援此屬性。

（4）.safria瀏覽器支援此屬性。

（5）.opera瀏覽器支援此屬性。

相關文章