移动端rem学习理解

								rem和px的区别

所有现代浏览器下默认字体尺寸是16px，这时1em=16px。然后你人为的把body里面定义font-size:12px;（把浏览器默认16px改小了），此刻1em=12px，如果0.8em实际等于12px*0.8；em的用处是你要整个网页字体统一变大变小你只要改body里面font-size的值就行了

下面就是用js写的设置rem的font-size

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

	rem是为了方便更好的兼容各种移动端页面的尺寸，保证在各种移动端都不会崩溃。

为了在移动端更好的适配。1rem=16px ，如果我们换算起来还是比较麻烦的所以用js将font-size的尺寸设置为1rem=100px是为了更好的换算。

以上是本人对rem的简单理解，如果有说的不好的地方请联多包涵。

如有任何问题请联系小编！