【CSS】679- rem，em，px的區(qū)別和使用場(chǎng)景
作rem布局原理深度理解（以及em/vw/vh）
一、前言
我們h5項(xiàng)目終端適配采用的是淘寶那套《Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配》方案。主要原理是rem布局。最近和別人談彈性布局原理，發(fā)現(xiàn)雖然已經(jīng)使用了那套方案很久，但是自己對(duì)rem的理解很含糊， 包括vw、vh等。所以打算寫博客總結(jié)一下，以加深理解。
二、幾個(gè)概念
這里就不講那些，物理像素、設(shè)備像素比了，可以自己查閱。要去理解rem/em/vm/vh等，首先要直觀的去理解他們到底是什么？理解好了，后面就好辦了。其實(shí)這幾個(gè)都是css單位，就像我們常用的px一樣，只不過(guò)他們都是相對(duì)單位。我平時(shí)使用的百分比單位如：width:100%;就是相對(duì)單位。
2.1、em
em作為font-size的單位時(shí)，其代表父元素的字體大小，em作為其他屬性單位時(shí)，代表自身字體大小——MDN
比如父元素font-size:12px;
自身元素如果寫成：font-sise:2em;則自身元素用px表示就是24px（相對(duì)父元素字體大?。?
但是自身元素設(shè)置：width:2rem,那么自身元素用px表示就是48px（相對(duì)自身字體大小）；
2.2、rem
rem作用于非根元素時(shí)，相對(duì)于根元素字體大??；rem作用于根元素字體大小時(shí)，相對(duì)于其出初始字體大小——MDN
比如根元素（html）設(shè)置font-size=12px; 非根元素設(shè)置width:2rem;則換成px表示就是24px；
如果根元素設(shè)置成font-size=1rem;則根元素?fù)Q成px就是相對(duì)于初始字體大小，一般是12px；
2.3、vm/vh
vw ：視口寬度的 1/100；vh ：視口高度的 1/100 —— MDN
在pc端，視口寬高就是瀏覽器得寬高；
在移動(dòng)端，這個(gè)還不太一樣，不過(guò)一般設(shè)置：
<meta?name="viewport"?content="width=device-width,?initial-scale=1,?maximum-scale=1">
代碼以顯示網(wǎng)頁(yè)的屏幕寬度定義了視窗寬度。網(wǎng)頁(yè)的比例和最大比例被設(shè)置為100%。
三、剖析rem布局原理
其實(shí)好好理解上面的概念，rem的原理也就很簡(jiǎn)單了。
假設(shè)我們將屏幕平局分為10份，每一份寬度用一個(gè)a表示，即a=屏幕寬度/10;那么：
div{width:?5a}?/*?屏幕寬度的50%?*/
但是css中沒(méi)有a這個(gè)單位啊？那怎么辦呢？對(duì)，css不是有相對(duì)單位rem么？我們?nèi)梢詫?shí)現(xiàn)借助rem代替上面的a。如：
html?{font-size:?12px}
div?{width:?2rem}?/*?24px*/
?
html?{font-size:?16px}
div?{width:?2rem}?/*?32px*/
那么問(wèn)題來(lái)了？怎么讓html元素字體大小恒等于屏幕的1/10呢？如ipone6寬是375px,font-size:37.5px;
html?{fons-size:?width?/?10}
div?{width:?5rem}?/*?5rem?=?5a?=?屏幕寬度的50%?*/
我們用js很容易動(dòng)態(tài)的設(shè)置html的font-size恒等屏幕的1/10;我們可以在頁(yè)面dom ready、resize和屏幕旋轉(zhuǎn)中設(shè)置：
document.documentElement.style.fontSize?=?document.documentElement.clientWidth?/?10?+?'px';
如何把設(shè)計(jì)稿的像素單位換成以rem為單位呢？可以用一個(gè)比例來(lái)計(jì)算：如設(shè)計(jì)稿寬度為750px，某個(gè)元素量得75px，那么：
75px/750px = 計(jì)算所得rem/10rem,所以計(jì)算所得rem=75px;所以我們?cè)跇邮街袑憌idth:1rem；實(shí)際寬度是75px；同理，如果設(shè)計(jì)稿總寬度是640px,則1rem=64px。
預(yù)處理函數(shù)可以簡(jiǎn)化：
$ue-width: 750; /* 設(shè)計(jì)稿圖的寬度 */
@function?px2rem($px)?{
??@return?#{$px/$ue-width*10}rem;
}
?
div?{
??width:?px2rem(100);/*編譯后：? p{width:1.5625rem}*/
}
四、rem萬(wàn)能嗎？
rem是一種彈性布局，它強(qiáng)調(diào)等比縮放，100%還原。它和響應(yīng)式布局不一樣，響應(yīng)式布局強(qiáng)調(diào)不同屏幕要有不同的顯示，比如媒體查詢。
字體并不合適使用rem, 字體的大小和字體寬度，并不成線性關(guān)系，所以字體大小不能使用rem；由于設(shè)置了根元素字體的大小，會(huì)影響所有沒(méi)有設(shè)置字體大小的元素，因?yàn)樽煮w大小是會(huì)繼承的，難道要每個(gè)元素都顯示設(shè)置字體大??？
我們可以在body上做字體修正，比如把body字體大小設(shè)置為16px，但如果用戶自己設(shè)置了更大的字體，此時(shí)用戶的設(shè)置將失效，比如合理的方式是，將其設(shè)置為用戶的默認(rèn)字體大小:
html?{fons-size:?width?/?10}
body?{font-size:?16px}??
那字體咋整？我們可以用媒體查詢和em來(lái)實(shí)現(xiàn)：
@media?screen?and?(min-width:?320px)?{
????body?{font-size:?16px}
}
@media?screen?and?(min-width:?481px)?and?(max-width:640px)?{
????body?{font-size:?18px}
}
@media?screen?and?(min-width:?641px)?{
????body?{font-size:?20px}
}
?
div?{font-size:?1.2em}
在制作H5的頁(yè)面中，rem并不適合用到段落文本上。所以在Flexible整個(gè)適配方案中，考慮文本還是使用px作為單位。只不過(guò)使用[data-dpr]屬性來(lái)區(qū)分不同dpr下的文本字號(hào)大小。
.selector?{
????width:?2rem;
????border:?1px?solid?#ddd;
}
[data-dpr="1"]?.selector?{
????font-size:?14px;
}
[data-dpr="2"]?.selector?{
????font-size:?28px;
}
[data-dpr="3"]?.selector?{
????font-size:?42px;
}
當(dāng)然你也可以給非根元素設(shè)置合適的字體。
五、rem布局方案
從上可以看出最好的彈性布局方案就是rem+js的方案，《Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配》就是采用rem+js實(shí)現(xiàn)的。flexible主要做了幾點(diǎn)。
動(dòng)態(tài)改寫標(biāo)簽給元素添加data-dpr屬性，并且動(dòng)態(tài)改寫data-dpr的值。給元素添加font-size屬性，并且動(dòng)態(tài)改寫font-size的值
六、em可以用來(lái)做彈性布局嗎？
上面知道，一旦某個(gè)節(jié)點(diǎn)的字體大小發(fā)生變化，其他節(jié)點(diǎn)也隨之變化，所以不合適，但是用來(lái)處理字體還是絕妙的。
七、vw/wh用來(lái)做彈性布局怎么樣？
根據(jù)上面說(shuō)，vw —— 視口寬度的 1/100；vh —— 視口高度的 1/100；感覺(jué)已經(jīng)不用多說(shuō)了。
/* rem方案 */
html?{font-size:?width?/?10}
p?{width:?1.5625rem}
?
/*?vw方案?*/
p?{width:?15.625vw}
如果rem方案中使用設(shè)置font-size=width/100就和vm意思一樣， 但是比如font-size:640px/100;瀏覽器不會(huì)識(shí)別6.4px這么小的字體的。
如果不考慮兼容性問(wèn)題，可以大膽使用vw/vm做彈性的布局。
回復(fù)“加群”與大佬們一起交流學(xué)習(xí)~
點(diǎn)擊“閱讀原文”查看70+篇原創(chuàng)文章
