使用rem來開發你的移動端網站 - weinan－IT工程師數位筆記本

文章出處

　what is rem ？

　　1）css3中的計量元素大小的單位，類似px、pt、em。

　　2）一種相對根元素font-size的計算方式。1rem = <html>'s font-size px (你懂就好)

　　3）使用場景：每個元素的寬高、文字大小、行距、補白等一切可以使用長度單位的地方。

　　4）使用范例:

html{font-size:37.5px;}/*根元素的基礎font-size被設置為37.5px，則1rem=37.5px*/
#box1{width:10rem;height:2rem;font-size:0.5rem;}/*box1的寬度10rem則被計算成寬度為375px，高度為75px，文字大小為18.25px；*/
#box1 .title{width:2rem;}/*title的寬度依舊相對于根元素計算，結果為75px*/

　rem在移動端的適配

　　由上面的例子可以看出，使用rem進行布局的網站，我們只需要修改根元素的font-size大小，則整個網頁的元素均可以按照預期進行等比例的計算和適配。

　　比如，在上面的例子中，我們將html的font-size改為32px，那么box1的樣式則變成了寬320px,高64px,文字大小則變為16px;

　　也就是說，在開發過程中，我們只要基于一種寬度的設備使用rem進行布局。然后使用js或css的media來根據寬度改變html的基礎font-size。就可以適配各種移動端設備了。

　　步驟如下：

　　　　1）假設我們拿到了一張750px寬度的設計圖。并且準備在iPhone6上進行調試，iphone6的屏幕寬度為375px，他們的比例是2：1；

　　　　　　初始過程：

　　　　　　　　設置<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>

　　　　　　　　設置html{font-size:37.5px} 　　

　　　　　　　　　　//為什么設置為37.5px？你也可以設置為其它的值。但為了易于換算和記憶，我們默認為每種屏幕設置他的基礎font-size=（屏幕寬度/10px）;

　　　　　　開發過程：將每個元素設置的單位使用rem（任何原本使用px，em，pt的地方），數量為（設計圖上的元素的實際px/2/37.5）rem；

　　　　　　...

　　　　　　好了，我們的頁面已經開發完成了。

　　　　2）此時，我們的頁面，在iPhone6下面，已經是妥妥的了。那么如何兼容其它不同寬度的移動設備呢？

　　　　　　思路：改變每種不同寬度的設備的根元素的css屬性，使其font-size值都為設備寬度/10px。

　　　　　　方案1：在頁面頭部插入一段JS。 //為什么是頭部？--防止頁面閃爍

(function() {
    var newRem = function() {
        var html = document.documentElement;
        html.style.fontSize = html.getBoundingClientRect().width / 10 + 'px';
    };
    window.addEventListener('resize', newRem, false);
    newRem();
})();

　　　　　　方案2：在css文件中增加媒體查詢

@media (min-width: 320px){html{font-size: 32px;} }
@media (min-width: 360px){html{font-size: 36px;} }
@media (min-width: 375px){html{font-size: 37.5px;} }
@media (min-width: 384px){html{font-size: 38.5px;} }
@media (min-width: 414px){html{font-size: 41.4px;} }
@media (min-width: 448px){html{font-size: 44.8px;} }
@media (min-width: 480px){html{font-size: 48px;} }
@media (min-width: 512px){html{font-size: 51.2px;} }
@media (min-width: 544px){html{font-size: 54.4px;} }
@media (min-width: 576px){html{font-size: 57.6px;} }
@media (min-width: 608px){html{font-size: 60.8px;} }
@media (min-width: 640px){html{font-size: 64px;} }
@media (min-width: 750px){html{font-size: 75px;} }
@media (min-width: 800px){html{font-size: 80px;} }
@media (min-width: 1024px){html{font-size: 102.4px;} }