rem布局和使用js rem動態改變字體大小，自適應

解決rem文字動態改變字體大小：

<script>

　　console.log(window.devicePixelRatio);

　　var iScale = 1;

　　iScale = iScale/window.devicePixelRatio;

　　document.write('<meta name="viewport" content="width=device-width,user-scable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '"/>');

　　//console.log(document.documentElement.clientWidth);

　　var iWidth = document.documentElement.clientWidth/16;

　　document.getElementsByTagName('html')[0].style.fontSize = iWidth + 'px';

</script>

rem布局：

 

var fun = function (doc, win) {

    var docEl = doc.documentElement,

        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

        recalc = function () {

            var clientWidth = docEl.clientWidth; 

            if (!clientWidth) return;

            //這里是假設在750px寬度設計稿的情況下，1rem = 100px；

            //可以根據實際需要修改

            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

        };

    if (!doc.addEventListener) return;

    win.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);

}

fun(document, window)