移動端rem佈局實踐

 

1、rem 適配基本概念：

　　對於移動端的開發，rem 適配必不可少，咱們能夠用多種方式實現， 根據 html 的 fontSize 屬性值爲基準，其它全部的 rem 值，根據這個基準計算。咱們根據屏幕寬度用 js 動態修改了 html 的 fontSize 屬性值，達到移動端適配的目的。

 

2、佈局方案：                   

　　方案1：

　　在 index.html 中添加以下代碼：

<script>
　　let html = document.documentElement;

　　window.rem = html.getBoundingClientRect().width / 16 ;
　　html.style.fontSize = window.rem + 'px';
</script>

　　這裏基於寬 320px 的屏幕分紅了 16 份，也就是 1rem = 20px。

　　目前大多數設計稿都是根據 iphone6 的寬（ 375px ）走的，建議這裏分紅 25 份，也就是 1rem = 15px，計算起來方便些。

　　方案2：

　　在 index.html 中添加以下代碼：

<script>
    (function(win, doc) {
        var h;
        win.addEventListener('resize', function() {
            clearTimeout(h);
            h = setTimeout(setUnitA, 500);
        }, false);
        win.addEventListener('pageshow', function(e) {
            if (e.persisted) {
                clearTimeout(h);
                h = setTimeout(setUnitA, 300);
            }
        }, false);
        var setUnitA = function() {
            doc.documentElement.style.fontSize = doc.documentElement.clientWidth / 16 + 'px';
        };
        setUnitA();
    })(window, document)
</script>

　　這段代碼監聽了窗口調整和頁面顯示兩個事件實現了動態適配的效果。

　　延展：　　　

　　1：自執行匿名函數和當即執行的函數表達式區別：

// 這是一個自執行的函數，函數內部執行自身，遞歸
function foo() { foo(); }

// 這是一個自執行的匿名函數，由於沒有標示名稱
// 必須使用arguments.callee屬性來執行本身
var foo = function () { arguments.callee(); };

// 這可能也是一個自執行的匿名函數，僅僅是foo標示名稱引用它自身
// 若是你將foo改變成其它的，你將獲得一個used-to-self-execute匿名函數
var foo = function () { foo(); };

// 有些人叫這個是自執行的匿名函數（即使它不是），由於它沒有調用自身，它只是當即執行而已。
(function () { /* code */ } ());

// 爲函數表達式添加一個標示名稱，能夠方便Debug
// 但必定命名了，這個函數就再也不是匿名的了
(function foo() { /* code */ } ());

// 當即調用的函數表達式（IIFE）也能夠自執行，不過可能不經常使用罷了
(function () { arguments.callee(); } ());
(function foo() { foo(); } ());

// 另外，下面的代碼在黑莓5裏執行會出錯，由於在一個命名的函數表達式裏，他的名稱是undefined
// 呵呵，奇怪
(function foo() { foo(); } ());

　　注意：arguments.callee在ECMAScript 5 strict mode裏被廢棄了，因此在這個模式下，實際上是不能用的。

　　參考：http://www.cnblogs.com/TomXu/archive/2011/12/31/2289423.html

　　咱們一直叫的自執行函數，確切的說是自執行匿名函數（Self-executing anonymous function），但此文原做者倡議使用當即調用的函數表達式（Immediately-Invoked Function Expression）這一名稱。

　　2：這裏爲何要把windows、document做爲參數傳進去？
　　　　——使全局變量以參數形式變成自執行函數內部的局部變量。

　　　　爲何這麼作？

　　　　——提升程序效率。

　　　　爲何能提升效率？

　　　　——這得從javascript的機制提及：所謂的scope chain做用域鏈， 在當前做用域中若是沒有該屬性（局部變量）則向上一層做用域中尋找，一直到最上層，也就是window。也就是說全局變量和下級做用域都是window的一個屬性，向下依此類推。

　　參考：https://segmentfault.com/q/1010000000311686