其原理是比較簡單的，也就是根據當前視口的大小自動計算跟元素的fontSize值：

   ! function(a) {
    function b() {
    	//為window物件添加了rem屬性，其值為document.documentElement的寬度的1/16!
    	//同時把他設定為document.documentElement的fontSize屬性，這裡其實不用把window物件設定一個rem屬性，因為a.rem只是設定了一次
        a.rem = f.getBoundingClientRect().width / 16, f.style.fontSize = a.rem + "px"
    }
    var c, d = a.navigator.appVersion.match(/iphone/gi) ? a.devicePixelRatio : 1,
    //iphone手機要計算devicePixelRatio的值
        e = 1 / d,
        //dpr表示一個CSS畫素對應於多少個物理畫素。那麼網頁的縮放比例很顯然就是其倒數，這樣才能在不同裝置上進行自適應
        f = document.documentElement,
        g = document.createElement("meta");
        //為window物件設定了dpr屬性，同時為window物件設定了resize方法
    if (a.dpr = d, a.addEventListener("resize", function() {
    	//在resize方法中如果兩次resize的時間間隔小於300ms，這時候我們會清除上一次的resize事件
            clearTimeout(c), c = setTimeout(b, 300)
        }, !1), a.addEventListener("pageshow", function(a) {
        	//pageshow事件在頁面顯示時候觸發，不論該頁面是否來自bfcache,在重新載入頁面中，pageshow會在load 事件觸發後觸發，而對於bfcache中的頁面，pageshow會在頁面狀態完全恢復的那一刻觸發。注意；雖然這個事件的目標是document，但是必須將其事件處理程式新增到window上。pageshow的event物件的persisted屬性是布林值，如果頁面儲存在bfcache中這個屬性為true。
            a.persisted && (clearTimeout(c), c = setTimeout(b, 300))
        }, !1), f.setAttribute("data-dpr", d), g.setAttribute("name", "viewport"), g.setAttribute("content", "initial-scale=" + e + ", maximum-scale=" + e + ", minimum-scale=" + e + ", user-scalable=no"), f.firstElementChild) f.firstElementChild.appendChild(g);
        //firstElementChild表示的就是head元素，為他指定一個meta標籤就可以了
    else {
        var h = document.createElement("div");
        h.appendChild(g), document.write(h.innerHTML)
    }
    b()
}(window);
 

通過這段程式碼我們可以知道跟元素的fontSize和縮放比例都是通過動態計算出來的，因此可以在不同的裝置上進行適配