前端潮咖

點擊上面藍字，關注我們！

關注

關注前端潮咖，每日精選好文

作者：大前端小菜鳥

來源：cnblogs.com/hyns/p/12380944.html

作rem布局原理深度理解(以及em/vw/vh)

一、前言

我們h5項目終端適配采用的是淘寶那套《Flexible實現手淘H5頁面的終端適配》方案。主要原理是rem布局。最近和別人談彈性布局原理，發現雖然已經使用了那套方案很久，但是自己對rem的理解很含糊， 包括vw、vh等。所以打算寫博客總結一下，以加深理解。

二、幾個概念

這里就不講那些，物理像素、設備像素比了，可以自己查閱。要去理解rem/em/vw/vh等，首先要直觀的去理解他們到底是什么？理解好了，后面就好辦了。其實這幾個都是css單位，就像我們常用的px一樣，只不過他們都是相對單位。我平時使用的百分比單位如：width:100%;就是相對單位。

2.1、em

em作為font-size的單位時，其代表父元素的字體大小，em作為其他屬性單位時，代表自身字體大小——MDN

比如父元素font-size:12px;

自身元素如果寫成：font-size:2em;則自身元素用px表示就是24px(相對父元素字體大小);

但是自身元素設置：width:2 em,那么自身元素用px表示就是48px(相對自身字體大小)；

2.2、rem

rem作用于非根元素時，相對于根元素字體大小；rem作用于根元素字體大小時，相對于其出初始字體大小——MDN

比如根元素(html)設置font-size=12px; 非根元素設置width:2rem;則換成px表示就是24px；

如果根元素設置成font-size=1rem;則根元素換成px就是相對于初始字體大小，一般是12px；

2.3、vw/vh

vw ：視口寬度的 1/100；vh ：視口高度的 1/100 —— MDN

在pc端，視口寬高就是瀏覽器得寬高；

在移動端，這個還不太一樣，不過一般設置：

<meta?name="viewport"?content="width=device-width,?initial-scale=1,?maximum-scale=1">

代碼以顯示網頁的屏幕寬度定義了視窗寬度。網頁的比例和最大比例被設置為100%。

三、剖析rem布局原理

其實好好理解上面的概念，rem的原理也就很簡單了。

假設我們將屏幕平局分為10份，每一份寬度用一個a表示，即a=屏幕寬度/10;那么：

div{width:?5a}?/*?屏幕寬度的50%?*/

但是css中沒有a這個單位啊？那怎么辦呢？對，css不是有相對單位rem么？我們全可以實現借助rem代替上面的a。如：

html?{font-size:?12px}
div?{width:?2rem}?/*?24px*/
?
html?{font-size:?16px}
div?{width:?2rem}?/*?32px*/

那么問題來了？怎么讓html元素字體大小恒等于屏幕的1/10呢？如ipone6寬是375px,font-size:37.5px;

html?{fons-size:?width?/?10}
div?{width:?5rem}?/*?5rem?=?5a?=?屏幕寬度的50%?*/

我們用js很容易動態的設置html的font-size恒等屏幕的1/10;我們可以在頁面dom ready、resize和屏幕旋轉中設置：

document.documentElement.style.fontSize?=?document.documentElement.clientWidth?/?10?+?'px';

如何把設計稿的像素單位換成以rem為單位呢？可以用一個比例來計算：如設計稿寬度為750px，某個元素量得75px，那么：

75px/750px = 計算所得rem/10rem,所以計算所得rem=75px;所以我們在樣式中寫width:1rem；實際寬度是75px；同理，如果設計稿總寬度是640px,則1rem=64px。

預處理函數可以簡化：

$ue-width: 750; /* 設計稿圖的寬度 */

@function?px2rem($px)?{
??@return?#{$px/$ue-width*10}rem;
}
?
div?{
??width:?px2rem(100);/*編譯后：? p{width:1.5625rem}*/
}

四、rem萬能嗎？

rem是一種彈性布局，它強調等比縮放，100%還原。它和響應式布局不一樣，響應式布局強調不同屏幕要有不同的顯示，比如媒體查詢。

字體并不合適使用rem, 字體的大小和字體寬度，并不成線性關系，所以字體大小不能使用rem；由于設置了根元素字體的大小，會影響所有沒有設置字體大小的元素，因為字體大小是會繼承的，難道要每個元素都顯示設置字體大小？

我們可以在body上做字體修正，比如把body字體大小設置為16px，但如果用戶自己設置了更大的字體，此時用戶的設置將失效，比如合理的方式是，將其設置為用戶的默認字體大小:

html?{fons-size:?width?/?10}
body?{font-size:?16px}??

那字體咋整？我們可以用媒體查詢和em來實現：

@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的頁面中，rem并不適合用到段落文本上。所以在Flexible整個適配方案中，考慮文本還是使用px作為單位。只不過使用[data-dpr]屬性來區分不同dpr下的文本字號大小。

.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;
}

當然你也可以給非根元素設置合適的字體。

五、rem布局方案

從上可以看出最好的彈性布局方案就是rem+js的方案，《Flexible實現手淘H5頁面的終端適配》就是采用rem+js實現的。flexible主要做了幾點。

動態改寫標簽給元素添加data-dpr屬性，并且動態改寫data-dpr的值。給元素添加font-size屬性，并且動態改寫font-size的值

六、em可以用來做彈性布局嗎？

上面知道，一旦某個節點的字體大小發生變化，其他節點也隨之變化，所以不合適，但是用來處理字體還是絕妙的。

七、vw/wh用來做彈性布局怎么樣？

根據上面說，vw —— 視口寬度的 1/100；vh —— 視口高度的 1/100；感覺已經不用多說了。

/* rem方案 */

html?{font-size:?width?/?10}
p?{width:?1.5625rem}
?
/*?vw方案?*/
p?{width:?15.625vw}

如果rem方案中使用設置font-size=width/100就和vm意思一樣， 但是比如font-size:640px/100;瀏覽器不會識別6.4px這么小的字體的。

如果不考慮兼容性問題，可以大膽使用vw/vh做彈性的布局。

---

》聲明：文章著作權歸作者所有，如有侵權，請聯系小編刪除。

關注公眾號「前端潮咖」，公眾號后臺回復「加群」歡迎關注討論前端知識，每日分享最新前端文章進入公眾號教程章節

前端潮咖

一個專注技術學習與分享的公眾號

長按識別二維碼關注我們

輕點“在看”支持作者