手機端頁面自適應解決方案—rem佈局

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

(function (doc, win) {        var docEl = doc.documentElement,            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',            recalc = function () {                var clientWidth = docEl.clientWidth;                if (!clientWidth) return;                if(clientWidth>=640){                    docEl.style.fontSize = '100px';                }else{                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';                }            };          if (!doc.addEventListener) return;        win.addEventListener(resizeEvt, recalc, false);        doc.addEventListener('DOMContentLoaded', recalc, false);    })(document, window);

 

如何使用？

這是rem佈局的核心代碼，這段代碼的大意是：
如果頁面的寬度超過了640px，那麼頁面中html的font-size恆爲100px，否則，頁面中html的font-size的大小爲： 100 * (當前頁面寬度 / 640)

 

爲什麼是640px？

設計圖一般是640px的，這樣相當於100px = 1rem，可以方便計算；

因爲是640px所以應限制下頁面的大小，所以最外層的盒子應該是：

 

1 2 3 4 5

position: relative; width: 100%; max-width: 640px; min-width: 320px; margin: 0 auto;