px表示“絕對尺寸”，實(shí)際上就是css中定義的像素让虐，利用px設(shè)置字體大小及元素寬高等比較穩(wěn)定和精確。Px的缺點(diǎn)是其不能適應(yīng)瀏覽器縮放時(shí)產(chǎn)生的變化黑滴，因此一般不用于響應(yīng)式網(wǎng)站憨募。
em表示相對尺寸，其相對于當(dāng)前對象內(nèi)文本的font-size（如果當(dāng)前對象內(nèi)文本的font-size計(jì)量單位也是em袁辈，則當(dāng)前對象內(nèi)文本的font-size的參考對象為父元素文本font-size）菜谣。使用em可以較好的相應(yīng)設(shè)備屏幕尺寸的變化，但是在進(jìn)行元素設(shè)置時(shí)都需要知道父元素文本的font-size及當(dāng)前對象內(nèi)文本的font-size晚缩，如有遺漏可能會導(dǎo)致錯(cuò)誤尾膊。
-
rem是CSS3新增的相對長度單位，是指相對于根元素html的font-size計(jì)算值的大小荞彼。簡單可理解為屏幕寬度的百分比冈敛。
以下為實(shí)例展示。（只顯示相關(guān)代碼鸣皂，html設(shè)定font-size=15px）
相關(guān)代碼如下：
結(jié)果如圖1所示：
px特點(diǎn)
IE無法調(diào)整那些使用px作為單位的字體大凶デ础；
國外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em或rem作為字體單位寞缝；
Firefox能夠調(diào)整px和em癌压，rem，但是96%以上的中國網(wǎng)民使用IE瀏覽器(或內(nèi)核)荆陆。
px像素（Pixel）滩届。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的被啼。(引自CSS2.0手冊)
em是相對長度單位帜消。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置趟据，則相對于瀏覽器的默認(rèn)字體尺寸券犁。(引自CSS2.0手冊)
任意瀏覽器的默認(rèn)字體高都是
16px。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px汹碱。那么12px=0.75em,10px=0.625em粘衬。為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數(shù)值除以10稚新，然后換上em作為單位就行了勘伺。
em特點(diǎn)
- em的值并不是固定的；
- em會繼承父級元素的字體大小褂删。
我們在寫CSS的時(shí)候飞醉，需要注意兩點(diǎn)：
- body選擇器中聲明Font-size=62.5%；
- 將你的原來的px數(shù)值除以10屯阀，然后換上em作為單位缅帘；
- 重新計(jì)算那些被放大的字體的em數(shù)值。避免字體大小的重復(fù)聲明难衰。
也就是避免1.2 * 1.2= 1.44的現(xiàn)象钦无。比如說你在#content中聲明了字體大小為1.2em，那么在聲明p的字體大小時(shí)就只能是1em盖袭，而不是1.2em, 因?yàn)榇薳m非彼em失暂，它因繼承#content的字體高而變?yōu)榱?em=12px。
rem特點(diǎn)
rem是CSS3新增的一個(gè)相對單位（root em)鳄虱。使用rem為元素設(shè)定字體大小時(shí)弟塞，仍然是相對大小，但相對的只是HTML根元素拙已。這個(gè)單位可謂集相對大小和絕對大小的優(yōu)點(diǎn)于一身决记，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)倍踪。目前霉涨，除了IE8及更早版本外，所有瀏覽器均已支持rem惭适。對于不支持它的瀏覽器笙瑟，應(yīng)對方法也很簡單，就是多寫一個(gè)絕對單位的聲明癞志。這些瀏覽器會忽略用rem設(shè)定的字體大小往枷。
例子：
p {font-size:14px; font-size:.875rem;}
與em相同的是它們都是使用元素設(shè)定字體大小，不同的是em是根據(jù)父級元素設(shè)置大小凄杯。而rem在根據(jù)指定html根元素的字符大小而定的错洁，從IE6到Chrome中，默認(rèn)根元素的font-size都是16px的戒突。如果想要設(shè)置12px的字體大小也就是12px/16px = 0.75rem屯碴。
使用em可改變HTML的默認(rèn)font-size，如果設(shè)置為62.5%膊存，則表示將默認(rèn)字體大小從16px修改為10px导而，即10px / 16px = 62.5%忱叭。
html{
font-size:62.5%;
}
一個(gè)px,em,rem單位轉(zhuǎn)換工具地址：http://pxtoem.com/
