前提
web開(kāi)發(fā)中，瀏覽器不指定字體大小時(shí)试溯，默認(rèn)為16px：
此處的“默認(rèn)”是針對(duì)整個(gè)頁(yè)面的根元素html標(biāo)簽而定的蔑滓，所以我們可以理解為，在這種情況下，當(dāng)字體為100%大小時(shí)：
16px = 100%實(shí)際上烫饼，這種比例關(guān)系并不特指字體大辛匀（因?yàn)閏ss中，“字體大小”決定的實(shí)際上是字符框的高度）杠纵，而是提供了不同分辨率下的一個(gè)默認(rèn)“準(zhǔn)則”荠耽。因此，利用這個(gè)特性比藻，rem這個(gè)單位在css3中誕生了铝量。
rem是根據(jù)html標(biāo)簽的font-size的大小計(jì)算出來(lái)的，因此我們可以近似上文的百分比银亲，即
16px = 1rem慢叨。所以開(kāi)發(fā)中當(dāng)需要轉(zhuǎn)換為rem單位時(shí)，我們把設(shè)計(jì)圖上以px為單位的標(biāo)注除以16即可务蝠，例如UI給了一個(gè)120px * 120px的按鈕拍谐，我們即可轉(zhuǎn)換為7.5rem * 7.5rem的按鈕。
小改進(jìn)
實(shí)際開(kāi)發(fā)過(guò)程中馏段，拿到設(shè)計(jì)圖后每個(gè)標(biāo)注的尺寸都要除以16會(huì)造成頻繁的計(jì)算轩拨，一定程度降低了開(kāi)發(fā)效率，為了便于計(jì)算院喜，我們可以把rem的換算因子改為便于計(jì)算的數(shù)字亡蓉，例如10px = 1rem，而rem是根據(jù)html標(biāo)簽的font-size的大小計(jì)算出來(lái)的喷舀，所以應(yīng)有：
html {
font-size: 10px
}
我們亦可轉(zhuǎn)換為百分比寫(xiě)法砍濒，因?yàn)槟J(rèn)情況下16px = 100%，則10px = 62.5%硫麻，故也可寫(xiě)作
html {
font-size: 62.5%
}
px爸邢？@2x？@3x庶香？
前兩小節(jié)中已經(jīng)基本滿足一部分的單位轉(zhuǎn)換甲棍，但2010年在蘋(píng)果的Retina屏幕的誕生后，無(wú)論是UI還是開(kāi)發(fā)者赶掖，需要考慮的就不僅是px這個(gè)單位了，原因是蘋(píng)果的Retina屏幕為了顯示更精細(xì)七扰，原本1個(gè)物理像素點(diǎn)大小的位置上能夠顯示2個(gè)像素點(diǎn)奢赂。像素的成倍增加導(dǎo)致原本320*480的物理尺寸上顯示的像素達(dá)到640*960，此時(shí)假設(shè)UI做了一張還是320*480像素的全屏設(shè)計(jì)圖颈走，在Retina屏幕下則會(huì)被拉伸損耗掉一半（理論上的量化值）的清晰度膳灶。為了避免這種情況，@2x圖應(yīng)運(yùn)而生，即UI直接把尺寸定為物理像素點(diǎn)的2倍大小640*960進(jìn)行設(shè)計(jì)轧钓，前端開(kāi)發(fā)時(shí)再把尺寸除以2得到物理像素的大小即可（實(shí)際顯示依然是640*960的分辨率）序厉。@3x的原理和使用是一樣的，它是蘋(píng)果出現(xiàn)plus系列后使用的1物理像素點(diǎn)顯示3個(gè)像素點(diǎn)的方案毕箍，就不再多介紹了弛房。
完善
綜上，移動(dòng)端的前端開(kāi)發(fā)在更多情況下而柑，要把@2x文捶、@3x的概念和rem等結(jié)合起來(lái)，當(dāng)UI以@2x為標(biāo)準(zhǔn)做圖時(shí)媒咳，原本1倍大小的120px * 120px圖片會(huì)切成240px * 240px粹排，此時(shí)在前端就要計(jì)算為240÷2÷10 = 12rem，同理@3x標(biāo)準(zhǔn)時(shí)則為360÷3÷10 = 12rem涩澡。
rem還有很多學(xué)問(wèn)顽耳，這篇只提到了一些皮毛，實(shí)際上很多時(shí)候還會(huì)結(jié)合媒體查詢等方法使不同的屏幕達(dá)到更好的兼容妙同，具體可以搜索參考一下例如淘寶射富、網(wǎng)易等大廠的實(shí)現(xiàn)方案。
