rem是如何實現自適應布局的？

rem（font size of the root element）是指相對於根元素的字型大小的單位。簡單的說它就是乙個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對于父元素的字型大小的單位。它們之間其實很相似，只不過乙個計算的規則是依賴根元素乙個是依賴父元素計算。

1.亞馬遜：

2.攜程：

3.蘭亭

上面的**都是採用的流式布局的技術實現的，他們在頁面布局的時候都是通過百分比來定義寬度，但是高度大都是用px來固定住，所以在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度還是和原來一樣，實際顯示非常的不協調，這就是流式布局的最致命的缺點，往往只有幾個尺寸的手機下看到的效果是令人滿意的，其實很多視覺設計師應該無法接受這種效果，因為他們的設計圖在大螢幕手機下看到的效果相當於是被橫向拉長來一樣。

流式布局並不是最理想的實現方式，通過大量的百分比布局，會經常出現許多相容性的問題，還有就是對設計有很多的限制，因為他們在設計之初就需要考慮流式布局對元素造成的影響，只能設計橫向拉伸的元素布局，設計的時候存在很多侷限性。

還有一種是固定頁面寬度的做法，早期有些**把頁面設定成320的寬度，超出部分留白，這樣做視覺，前端都挺開心，視覺在也不用被流式布局限制自己的設計靈感了，前端也不用在搞坑爹的流式布局。但是這種解決方案也是存在一些問題，例如在大螢幕手機下兩邊是留白的，還有乙個就是大螢幕手機下看起來頁面會特別小，操作的按鈕也很小，手機**首頁起初是這麼做的，但近期改版了，採用了rem。

上面說過rem是通過根元素進行適配的，網頁中的根元素指的是html我們通過設定html的字型大小就可以控制rem的大小。舉個例子：

html

.btn

demo 上面**結果按鈕大小如下圖：

我把html設定成10px是為了方便我們計算，為什麼6rem等於60px。如果這個時候我們的.btn的樣式不變，我們再改變html的font-size的值，看看按鈕發生上面變化:

html

demo

按鈕大小結果如下：

上面的width，height變成了上面結果的兩倍，我們只改變了html的font-size，但.btn樣式的width,height的rem設定的屬性不變的情況下就改變了按鈕在web中的大小。

其實從上面兩個案例中我們就可以計算出1px多少rem:

第乙個例子：

120px = 6rem * 20px(根元素設定大值)

第二個例子：

240px = 6rem * 40px(根元素設定大值)

推算出：

10px = 1rem 在根元素（font-size = 10px的時候）；

20px = 1rem 在根元素（font-size = 20px的時候）；

40px = 1rem 在根元素（font-size = 40px的時候）；

在上面兩個例子中我們發現第乙個案例按鈕是等比例放大到第二個按鈕，html font-size的改變就會導致按鈕的大小發生改變，我們並不需要改變先前給按鈕設定的寬度和高度，其實這就是我們最想看到的，為什麼這麼說？接下來我們再來看乙個例子：

由上面兩個的demo中我們知道改變html的font-size可以等比改變所有用了rem單位的元素，所以大家可以通過chrome瀏覽器的除錯工具去切換第三個的demo在不同裝置下的展示效果，或者通過縮放瀏覽器的寬度來檢視效果，我們可以看到不管在任何解析度下，頁面的排版都是按照等比例進行切換，並且布局沒有亂。我只是通過一段js根據瀏覽器當前的解析度改變font-size的值，就簡單的實現了上面的效果，頁面的所有元素都不需要進行任何改變。

到這裡肯定有很多人會問我是怎麼計算出不同解析度下font-size的值？

首先假設我上面的頁面設計稿給我時候是按照640的標準尺寸給我的前提下，（當然這個尺寸肯定不一定是640，可以是320，或者480，又或是375）來看一組**。

上面的**藍色一列是demo3中頁面的尺寸，頁面是以640的寬度去切的，怎麼計算不同寬度下font-site的值，大家看**上面的數值變化應該能明白。舉個例子：384/640 = 0.6，384是640的0.6倍，所以384頁面寬度下的font-size也等於它的0.6倍，這時384的font-size就等於12px。在不同裝置的寬度計算方式以此類推。

html 
@media only screen and (min-width: 401px)
}@media only screen and (min-width: 428px)
}@media only screen and (min-width: 481px)
}@media only screen and (min-width: 569px)
}@media only screen and (min-width: 641px)
}

上面的做的設定當然是不能所有裝置全適配，但是用js是可以實現全適配。具體用哪個就要根據自己的實際工作場景去定了。

**首頁：m.taobao.com

//designwidth:設計稿的實際寬度值，需要根據實際設定

//maxwidth:製作稿的最大寬度值，需要根據實際設定

//這段js的最後面有兩個引數記得要設定，乙個為設計稿實際寬度，乙個為製作稿最大寬度，例如設計稿為750，最大寬度為750，則為(750,750)

(function(designwidth, maxwidth) ';
}	if (docel.firstelementchild)  else 
//要等 wiewport 設定好後才能執行 refreshrem，不然 refreshrem 會執行2次；
refreshrem();
win.addeventlistener("resize", function() , false);
win.addeventlistener("pageshow", function(e) 
}, false);
if (doc.readystate === "complete")  else , false);
}})(750, 750);

rem是如何實現自適應布局的？

Rem是如何實現自適應布局的？

rem是如何實現自適應布局的？

rem如何實現自適應布局的

rem是如何實現自適應布局的？

Rem是如何實現自適應布局的？

rem是如何實現自適應布局的？

rem如何實現自適應布局的

相關推薦