使用px定義字體的話無法用瀏覽器字體放大功能，還有在做響應式網頁時，字體響應大小也非常不方便。
px：像素（plxels），相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。
em：相對長度單位。相對於當前對象內文本的字體尺寸（em是基於排版轉換的一種量度，在css中em的大小參考字符框的高度）。
默認1em=16px，那爲什麼等於16px？因爲瀏覽器默認的字體大小都是16px，所以沒有重新設置瀏覽器默認字體大小的話1em就等於16px。在頁面裏要用到em作爲單位的話，默認的1em=16px會使得在計算他們轉換的值時非常不方便，比如我要把一個塊裏面的內容字體大小設置成18px，但我只想用em做爲單位，那麼情況就會這樣，1em=16px，1px=0.0625em，得18px=1.125em（0.0625em*18）。擦，多麻煩！所以爲了簡化px和em之間的換算，需要在body裏定義font-size:62.5%，即將瀏覽器初始化爲即1em=10px，這樣的話，上面的font-size:18px就等於font-size:1.8em。
上面說過在em的大小參考字符框的高度，所以在css其他屬性中，包括width,height,margin,padding,text-indent等使用em作爲單位的話，大小計算也跟計算font-size一樣的道理。
計算公式：1/父元素font-size值*需要轉換的px=em值 (PS:父元素font-size的單位沒有關係，無論px還是em)
不過如果當一個元素本身設置了字體大小，其自身的width，height，margin，padding等屬性是以自己的font-size值去計算em的值，在這個元素下的子元素也同理。
所以當元素自身有設置font-size時，除font-size外其他屬性的計算公式應該是這樣：
1/元素自身的font-size值*需要轉換的px=em值
在響應式中的應用
在響應式網頁中，字體在不同尺寸的設備下要有不同的大小，以達到最佳的閱讀效果，比如一個響應式頁面在手機和平板裏的字體大小是不一樣的，所以用em作爲字體大小單位的話，在響應式佈局中改變字體大小非常方便。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<!DOCTYPE html>
<html>
<head>
<metacontent="width=320,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"name="viewport">
<metacharset=utf-8
/>
<title>JS
Bin</title>
<style>
*{padding:0;margin:0;}
body{font-size:100%;}
h1{font-size:2.4em;}
h2{font-size:2em;}
p,a{font-size:1.6em;}
.header-title{text-align:center;padding:20px0;background:#ccc}
.header img{width:160px;border-radius:50%;background:#eee;}
.header-menu{line-height:60px;background:#eee;text-align:center;}
.mod-article{background:#ddd;padding:20px;margin-bottom:5px;}
.footer{line-height:100px;background:#ccc;text-align:center;}
@media screen and (max-width:
800px) {
body{font-size:87.5%;}
}
@media screen and (max-width:
320px) {
body{font-size:62.5%;}
}
</style>
</head>
<body>
<divclass="container">
<divclass="header">
<divclass="header-title">
<imgsrc="#"alt="">
<h1>囧橙</h1>
<p>前端收藏夾</p>
</div>
<divclass="header-menu">
<ahref="#">菜單</a>
<ahref="#">菜單</a>
<ahref"#">菜單</a>
<ahref="#">菜單</a>
</div>
</div>
<divclass="content">
<divclass="content-main">
<divclass="mod-article">
<divclass="mod-article-box">
<divclass="mod-article-content">
<h2>我是標題</h2>
<p>我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容</p>
</div>
</div>
</div>
<divclass="mod-article">
<divclass="mod-article-box">
<divclass="mod-article-content">
<h2>我是標題</h2>
<p>我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容</p>
</div>
</div>
</div>
</div>
</div>
<divclass="footer"><p>底部在此</p></div>
</div>
</body>
</html>
|
運行以上代碼，改變窗口大小，可看到當窗口大小大於或小於指定尺寸時字體會隨着變化，在所有字體都用em作爲單位的情況下，只需要改變body{font-size:xx%}即可，當然這只是隨便舉個簡單的例子，看具體情況去設置。
em有如下特點：
1、em的值並不是固定的；
2、em會繼承父級元素的字體大小。
所以我們在寫CSS的時候，需要注意兩點：
1、body選擇器中聲明Font-size=62.5%；
2、將你的原來的px數值除以10，然後換上em作爲單位；
3、重新計算那些被放大的字體的em數值。避免字體大小的重複聲明。
也就是避免1.2 * 1.2= 1.44的現象。比如說你在#content中聲明瞭字體大小爲1.2em，那麼在聲明p的字體大小時就只能是1em，而不是1.2em, 因爲此em非彼em，它因繼承#content的字體高而變爲了1em=12px。
但是12px漢字例外，就是由以上方法得到的12px(1.2em)大小的漢字在IE中並不等於直接用12px定義的字體大小，而是稍大一點。這個問題 Jorux已經解決，只需在body選擇器中把62.5%換成63%就能正常顯示了。原因可能是IE處理漢字時，對於浮點的取值精確度有限。不知道有沒有其他的解釋。
原文鏈接1
原文鏈接2
