rem使用

rem能等比例適配全部屏幕

 

上面講了一大堆目前大部分公司主流的一些web app的適配解決方案，接下來說下rem是如何工做的。

 

上面說過rem是經過根元素進行適配的，網頁中的根元素指的是html咱們經過設置html的字體大小就能夠控制rem的大小。舉個例子：

html{ font-size:20px; } .btn { width: 6rem; height: 3rem; line-height: 3rem; font-size: 1.2rem; display: inline-block; background: #06c; color: #fff; border-radius: .5rem; text-decoration: none; text-align: center; }

 

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

html{ font-size:40px; }

 

上面的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。在不一樣設備的寬度計算方式以此類推。

 

Demo3中我是經過JS去動態計算根元素的font-size，這樣的好處是全部設備分辨率都能兼容適配，淘寶首頁目前就是用的JS計算。但其實不用JS咱們也能夠作適配，通常咱們在作web app都會先統計本身網站有哪些主流的屏幕設備，而後去針對那些設備去作media query設置也能夠實現適配，例以下面這樣：

html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !important; } } @media only screen and (min-width: 428px){ html { font-size: 26.75px !important; } } @media only screen and (min-width: 481px){ html { font-size: 30px !important; } } @media only screen and (min-width: 569px){ html { font-size: 35px !important; } } @media only screen and (min-width: 641px){ html { font-size: 40px !important; } }

上面的作的設置固然是不能全部設備全適配，可是用JS是能夠實現全適配。具體用哪一個就要根據本身的實際工做場景去定了。