為了充分還原設計稿，適配各種螢幕大小，px已然是不能用了，em這種相對父元素來計算的太麻煩，對此還是rem靠譜，首先介紹下rem:
rem是css3引進的新單位，在W3C-官網是這樣描述rem的——”font size of the root element”,
我們在頁面引入如下一段js

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

這段js的意思就是動態設定html根元素的font-size,由於我們設計稿款是750px基於iPhone6設計，在這裡clientWidth是獲取當前屏的寬，這裡應該是根元素的font-size=(clientWidth/750)*100=50px，讓1rem等於設計稿上100px便於計算，例如iphone6屏寬375換算應該是：50*7.5=375,所以width=7.5rem,對於設計稿中的字型是28px,css應該就是：font-size=0.28rem;當顯示屏是iphone5時，相應根元素的font-size變小，頁面字型佈局相應變化，便達到自適應的目的。（如果設計稿是基於650,一樣換算font-size=(clientWidth/650)*100）。
對於這段程式碼中 resizeEvt是判斷當前視窗有沒有orientationchange這個方法，如果有便返回沒有就返回resize,orientationchange與resize同時監聽手機旋轉橫屏的事件，就是當螢幕旋轉之後重新計算font-size.