移动端适配方案

移动端众多的手机型号使得前端开发起来 难度很大。所以，为了统一众多机型的适配，前端不得不采取大而全的方案去适配大多数屏幕。目前的主要解决方案有两种：普遍方案和手淘方案。原理是通过缩放meta生成不同的缩放比例和直接给根元素赋值大小。

源码

• 普遍是适配方案

(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 = 100 * (clientWidth / 750) + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);       
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

说明

注意：普遍的就是假设设计稿宽度为750px,转化为rem就是除以100px