在對(duì)頁(yè)面進(jìn)行自適應(yīng)時(shí)，查閱相關(guān)資料了解到，通常有兩種方式將px轉(zhuǎn)換為em或者rem，下面就上述三者之間的聯(lián)系進(jìn)行講解：
em與px轉(zhuǎn)換
一般瀏覽器默認(rèn)1em=16px，通過(guò)設(shè)置font-size大小來(lái)代表如：16px*0.625=10px，其則代表1em=10px，直接上代碼(注釋的樣式為瀏覽器默認(rèn) （1em=16px）的長(zhǎng)寬)：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{font-size: 16px;}
/*1em=10px*/
/*#div1{width:640px;height:320px;margin:160px auto;padding-top:160px;}*/
#div1{width:40em;height:20em;margin:10em auto;padding-top:10em;}
/*#div2{width:200px;height:200px;margin:0 auto;}*/
#div2{width:12.5em;height:12.5em;margin:0 auto;}
/*#div3{width:480px;height:320px;margin:80px auto;}*/
#div3{width:30em;height:20em;margin:5em auto;}
</style>
</head>
<body>
<div id="div1" style="background:lightslategray;">
<div id="div2" style="background: darkseagreen;"></div>
</div>
<div id="div3" style="background: deepskyblue;"></div>
</body>
</html>
下面直接上圖：
1122162301.png
在進(jìn)行轉(zhuǎn)換之前，我們一定要查看瀏覽器默認(rèn)字體（最小）大小，如chrome瀏覽器，默認(rèn)字體最小為12px，所以即使我們?yōu)榱朔奖阍O(shè)置1em=10px，其瀏覽器仍舊以1em=12px計(jì)算。
16px*0.75=12px=1em
body{font-size: 12px;}
或者{font-size: 75%;}
下圖是執(zhí)行結(jié)果：
11221032902.png
em與rem區(qū)別
rem與px，和em與px轉(zhuǎn)換是一樣的，二者區(qū)別在于前者默認(rèn)從根元素繼承，后者從父級(jí)元素繼承，還是上述代碼，html我們不設(shè)置font-size，其默認(rèn)為16px，上代碼展示（div3單位我們修改為rem）：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{font-size: 12px;}
/*1em=10px*/
/*#div1{width:640px;height:320px;margin:160px auto;padding-top:160px;}*/
#div1{width:40em;height:20em;margin:10em auto;padding-top:10em;}
/*#div2{width:200px;height:200px;margin:0 auto;}*/
#div2{width:12.5em;height:12.5em;margin:0 auto;}
/*#div3{width:480px;height:320px;margin:80px auto;}*/
#div3{width:30rem;height:20rem;margin:5rem auto;}
</style>
</head>
<body>
<div id="div1" style="background:lightslategray;">
<div id="div2" style="background: darkseagreen;"></div>
</div>
<div id="div3" style="background: deepskyblue;"></div>
</body>
</html>
下面是輸出結(jié)果：
1122123503.png
從上述我們可以看到，div3單位設(shè)置rem后，其并沒(méi)有根據(jù)body設(shè)置而變化，仍舊默認(rèn)font-size：16px。所以為了方便，我們可以設(shè)置16px*1.25=20px，其代表1em為20px，同樣有利于我們計(jì)算。
