移動(dòng)端開發(fā)中em和rem詳解

一、單位em與remem：就是一種長(zhǎng)度單位，它是參照當(dāng)前元素的字號(hào)，如果沒有設(shè)置，就參照父容器，一直到當(dāng)前瀏覽器的默認(rèn)字號(hào)。比如：當(dāng)前瀏覽器默認(rèn)字體大小為16px，則1em=16px;rem：css3新增的一種長(zhǎng)度單位，它是參照根元素(html)的字號(hào)。比如：當(dāng)前瀏覽器默認(rèn)字體大小為16px，而html的字號(hào)為20px，則1rem=20px;em是相對(duì)長(zhǎng)度單位（參照父元素），其參照當(dāng)前元素字號(hào)大小，如果當(dāng)前元素未設(shè)置字號(hào)則會(huì)繼承其祖先元素字號(hào)大小。例如：.box{font-size:16px;}

則1em=16px.box{font-size:32px;}則1em=32px，0.5em=16pxrem相對(duì)長(zhǎng)度單位（參照html元素），其參照根元素(html)字號(hào)大小。例如：html{font-size:16px;}

則1rem=16pxhtml{font-size:32px;}

則1rem=32px，0.5rem=16px.vw：viewportwidth，視口寬度

（1vw=1%視口寬度）vh：viewportheight視口高度

（1vh=1%視口高度）二、rem的使用一般情況下，美工給前端的移動(dòng)端UI圖的尺寸一般為

640px

和

750px。之后我們要設(shè)計(jì)的移動(dòng)端的大小可能是320px（iPhone5），375px（iPhone6），414px（iPhone6plus）等。那么如何等比例的在這些移動(dòng)端上進(jìn)行一些元素布局的設(shè)計(jì)呢？可以使用em嗎？不好，不同瀏覽器可能默認(rèn)字號(hào)大小不同，如果使用者對(duì)元素沒有設(shè)置字號(hào)大小的話，就會(huì)參考父元素，可能一直到瀏覽器的默認(rèn)字號(hào)大小。這樣的話，可能不同的瀏覽器1em的大小不同。所以，一般來說在移動(dòng)端大多使用rem作為單位。如何使用呢？我們以640px的UI為例。一般我們把640px的UI分成20份，那么每一份的大小為32px。那么

750px的UI分成20份，那么每一份的大小為37.5px。如何我們要在320px的屏幕上進(jìn)行縮放的話，我們也將320px分成20份，每一份為16px。這時(shí)，我們想把UI上面一個(gè)160px*160px的矩形，縮放到320px的屏幕上的話，160是占UI的5份，那么在320px上的矩形也應(yīng)該占16px的5份。所以，這個(gè)矩形在320px上的長(zhǎng)度應(yīng)該為：160/32*16px，如何把16px換成rem？rem是按照html的字號(hào)決定的，那么我們可以這樣做，我們先根據(jù)屏幕的大小，設(shè)置html的字號(hào)：@mediascreenand(device-width:320px){html{ font-size:16px;}}@mediascreenand(device-width:360px){ html{ font-size:18px; }}@mediascreenand(device-width:375px){html{ font-size:18.75px;}}@mediascreenand(device-width:414px){html{ font-size:20.07px;}}之后，我們的代碼可以改為：160/32rem

，那么這份代碼在不同屏幕的瀏覽器下，就有相應(yīng)的大小，以保持不同屏幕下的不同縮放尺寸。三、通用使用步驟1、設(shè)置各種屏幕尺寸下的HTML的字號(hào)大小。@mediascreenand(device-width:320px){html{ font-size:16px; }}@mediascreenand(device-width:360px){ html{ font-size:18px; }}@mediascreenand(device-width:375px){html{ font-size:18.75px;}}@mediascreenand(device-width:414px){html{ font-size:20.07px;}}2、將UI下各個(gè)元素，不論是元素還是邊距，邊框等值全部除以每一份的大小，單位為rem即可得到在不同屏幕下的不同縮放大小。比如：640px的UI，設(shè)置為：元素等/32rem;750px的UI，設(shè)置為：元素等/37.5rem;示例：//UI稿件為640px.item{height:218/32rem;border:3/32remdashed#dedede;background-color:#fff;padding-top:36/32rem;font-size:104/32rem;box-sizing:border-box;a{ color:#aeaeae; text-align:center;}span{font-size:26/32rem;display:block; margin-top:16/32rem;}}Tips：把rem理解成份

的意思更好理解，你在640px上占多少份，在實(shí)際的屏幕上就占多少份。移動(dòng)端適配補(bǔ)充我們可以看到，我們?cè)跁鴮懙臅r(shí)候每次這樣除以一個(gè)32或者37.5還挺難看的，而且css還不能使用，在less或者sass這種css處理器上才可以使用除號(hào)：{height:218/32rem;border:3/32remdashed#dedede;padding-top:36/32rem;font-size:104/32rem;}{height:218/37.5rem;border:3/37.5remdashed#dedede;padding-top:36/37.5rem;font-size:104/37.5rem;}所以，為了兼容css，也為了好看，我們就不要分成20份了，我們可以把640px的UI分成6.4份，把750px的UI分成7.5份，這樣每一份的大小都是100px。以后就不需要寫成36/37.5rem;

的形式，而是

0.36rem

的形式，是不是好看多了。但是要注意，媒體查詢需要變一下：//對(duì)于640px的UI@mediascreenand(device-width:320px){html{ font-size:50px;//320÷6.4}}@mediascreenand(device-width:360px){html{ font-size:56.25px;//360÷6.4}}//對(duì)于750px的UI@mediascreenand(device-width:320px){html{ font-size:42.67px;//320÷7.5}}@mediascreenand(device-width:360px){html{ font-size:48px;//360÷7.5}}繼續(xù)改進(jìn)：從上文看出，為了適配320px，360px，375px等等尺寸的屏幕，我們需要寫多個(gè)媒體查詢，而且還沒有做到連續(xù)，只是挑選出了幾個(gè)經(jīng)典的尺寸進(jìn)行媒體查詢?cè)O(shè)置html的font-size大小，如果出現(xiàn)一個(gè)350px的，我們就只能使用320px的適配了。于是，我們需要通過js動(dòng)態(tài)設(shè)置不同尺寸html的font-size大小。我們已750px的UI為例，把它分成7.5份，每一份100（100的話是為了好算）。如果UI中有一個(gè)300px的元素的話，我們?cè)?20px的設(shè)備中應(yīng)該顯示多少呢？計(jì)算過程：300px在UI中占（300/100=3）份那么在320px中也應(yīng)該占3份，320px因?yàn)橐彩欠殖?.5份的，那么就應(yīng)該是（320/7.5）×3=128px寫出rem形式的通用公式就是：設(shè)置html的font-size：

deviceWidth/7.5在使用的時(shí)候在UI上是300px占了3份，所以320px也占3份就是：3rem，類比在UI上是320px就是3.2rem

。。。所以，我們發(fā)現(xiàn)只要設(shè)置好了html的font-size后，我們只需要在使用的時(shí)候把圖形在原UI尺寸的基礎(chǔ)上除以100，然后加上rem即可。那么回到上面的問題，如何使用js動(dòng)態(tài)設(shè)置html的font-size？在腳本開始的時(shí)候，獲取設(shè)備寬度deviceWidth，然后設(shè)置html的font-size大小。這樣就不必寫很多媒體查詢了。<scripttype="text/javascript">(function(){vardeviceWidth=document.documentElement.clientWidth;deviceWidth=deviceWidth<320?320:deviceWidth>640?6