關於rem自適應的一點研究

參考地址：http://m.ctrip.com/html5/

https://www.amazon.cn/

　　rem是相對於html根元素的一個單位。rem是px的16倍，即1rem = 16px;除了IE低版本瀏覽器不支持它之外，其餘都支持，看下圖：

　　如今大部分瀏覽器IE9+，Firefox、Chrome、Safari、Opera ，若是咱們不修改相關的字體配置，都是默認顯示font-size是16px即

html {
    font-size:16px;
}

那麼若是咱們想給一個P標籤設置12px的字體大小那麼用rem來寫就是

p {
    font-size: 0.75rem; //12÷16=0.75（rem）
}

用它的好處就是，只要改變根的大小，後面全部的rem設置都會改變，這樣很好作屏幕適配。

rem進行屏幕適配

　　在講rem屏幕適配以前，先說一下通常作移動端適配的方法，通常能夠分爲： 1 簡單一點的頁面，通常高度直接設置成固定值，寬度通常盛滿整個屏幕。 2 稍複雜一些的是利用百分比設置元素的大小來進行適配，或者利用flex等css去設置一些須要定製的寬度。 3 再複雜負責一些的響應式頁面，須要利用css3的media query屬性來進行適配，大體思路是根據屏幕不一樣大小，來設置對應的css樣式。 上面的一些方法，其實也能夠解決屏幕適配等問題，可是既然出來的rem這個新東西，也必定能兼顧到這些方面，下面具體來講具體使用rem：

先看一個簡單的例子：

.con {
      width: 10rem;
      height: 10rem;
      background-color: red;
 }
<div class="con">
        
</div>

這是一個div，寬度和高度都用rem來設置了，在瀏覽器裏面是這樣顯示的，  能夠看到，在瀏覽器裏面width和height分別是160px，正好是16px * 10,那麼若是將html根元素的默認font-size修改一下呢？

 

html {
    font-size: 17px;
}
.con {
      width: 10rem;
      height: 10rem;
      background-color: red;
}
<div class="con">
        
</div>

 

再來看看結果：

這時width和height都是170px，這就說明了將rem應用與width和height時，一樣適用與rem的特性，根據根元素的font-size值來改變自身的值，由此咱們應該能夠聯想到咱們能夠給html設定不一樣的值，從而達到咱們css樣式中的適配效果。

rem數值計算

 

若是利用rem來設置css的值，通常要經過一層計算才行，好比若是要設置一個長寬爲100px的div，那麼就須要計算出100px對應的rem值是 100 / 16 =6.25rem，這在咱們寫css中，其實算比較繁瑣的一步操做了，不過這其實都不是事。 想一想咱們如今的工程，哪一個沒有用構建的，前端構建中，徹底能夠利用scss來解決這個問題，例如咱們能夠寫一個scss的function px2rem即：

 

@function px2rem($px){
    $rem : 37.5px;
    @return ($px/$rem) + rem;
}

這樣，當咱們寫具體數值的時候就能夠寫成：

 

height: px2rem(90px);
width: px2rem(90px);;

 

看到這裏，你可能會發現一些不理解的地方，就是上面那個rem:37.5px是怎麼來的，正常狀況下不是默認的16px麼，這個其實就是頁面的基準值，和html的font-size有關。

 

rem基準值計算

 

關於rem的基準值，也就是上面那個37.5px實際上是根據咱們所拿到的視覺稿來決定的主要有如下幾點緣由：

1 因爲咱們所寫出的頁面是要在不一樣的屏幕大小設備上運行的

2 因此咱們在寫樣式的時候必需要先已一個肯定的屏幕來做爲參考，這個就由咱們拿到的視覺稿來定

3 假如咱們拿到的視覺稿是以iphone6的屏幕爲基準設計的

4 iPhone6的屏幕大小是375px，

 

rem = window.innerWidth  / 10

 

這樣計算出來的rem基準值就是37.5（iphone6的視覺稿），這裏爲何要除以10呢，其實這個值是隨便定義的，假如不除以10，根據咱們算出來的基準值會偏大，這樣在設置html的font-size時候會偏小，咱們知道瀏覽器的font-size若是小於12px就顯示不出效果了，在這裏列舉一下其餘手機的

iphone3gs: 320px / 10 = 32px

iphone4/5: 320px  / 10 = 32px

iphone6: 375px  / 10 =37.5px

 

動態設置html的font-size

 

如今關鍵問題來了，咱們該如何經過不一樣的屏幕去動態設置html的font-size呢，這裏通常分爲兩種辦法

1 利用css的media query來設置即

 

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
      html{font-size: 37.5px;}
}

 

2 利用javascript來動態設置 根據咱們以前算出的基準值，咱們能夠利用js動態算出當前屏幕所適配的font-size即：

 

document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';

而後咱們看一下以前那個demo展現的效果

 

.con {
      width: px2rem(200px);
      height: px2rem(200px);
      background-color: red;
}
<div class="con">
        
</div>
document.addEventListener('DOMContentLoaded', function(e) {
                document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
}, false);

 

在iphone4下，顯示169px

因而可知咱們能夠經過設置不一樣的html基礎值來達到在不一樣頁面適配的目的，固然在使用js來設置時，須要綁定頁面的resize事件來達到變化時更新html的font-size。

 

rem適配進階

咱們知道，通常咱們獲取到的視覺稿大部分是iphone6的，因此咱們看到的尺寸通常是雙倍大小的，在使用rem以前，咱們通常會自覺的將標註/2，其實這也並沒有道理，可是當咱們配合rem’使用時，徹底能夠按照視覺稿上的尺寸來設置。

1 設計給的稿子雙倍的緣由是iphone6這種屏幕屬於高清屏，也便是設備像素比(device pixel ratio)dpr比較大，因此顯示的像素較爲清晰。

2 通常手機的dpr是1，iphone這種高清屏是2，能夠經過js的window.devicePixelRatio獲取到當前設備的dpr，因此iphone6給的視覺稿大小是（*2）750×1334了。

3 拿到了dpr以後，咱們就能夠在viewport meta頭裏，取消讓瀏覽器自動縮放頁面，而本身去設置viewport的content例如

 

meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');

 

4 設置完以後配合rem，修改

 

@function px2rem($px){
    $rem : 75px;
    @return ($px/$rem) + rem;
}

 

雙倍75，這樣就能夠徹底按照視覺稿上的尺寸來了。不用在/2了，這樣作的好處是：

1 解決了圖片高清問題。

2 解決了border 1px問題（咱們設置的1px，在iphone上，因爲viewport的scale是0.5，因此就天然縮放成0.5px）

 

可是rem也並非萬能的，下面也有一些場景是不適於使用rem的

1 當用做圖片或者一些不能縮放的展現時，必需要使用固定的px值，由於縮放可能會致使圖片壓縮變形等。

2 再設置backgroundposition或者backgroundsize時不宜使用rem。

在列舉幾個使用rem的線上網站：

網易新聞：http://3g.163.com/touch/news/subchannel/all?version=v_standard

聚划算：https://jhs.m.taobao.com/m/index.htm#!all