移动端rem自适应方案

一般设计师给我们的设计稿尺寸都为750*1340 ..

网易，淘宝移动端首页上html元素的font-size

目前就先说一下网易的做法

引入下面这段js,用于计算动态的font-size

(function(doc, win) {
            var docEl = doc.documentElement,
            isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
            dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,//iframe引用时，禁止缩放
            dpr = 1,
            scale = 1 / dpr,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            docEl.dataset.dpr = dpr;
            var metaEl = doc.createElement('meta');
            metaEl.name = 'viewport';
            metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
            docEl.firstElementChild.appendChild(metaEl);
            var recalc = function() {
                var width = docEl.clientWidth;
                if(width / dpr > 750) {
                    width = 750 * dpr;
                }  这个if判断是判断大于750的情况下 恒等于750
                // 乘以100，px : rem = 100 : 1
                docEl.style.fontSize = 100 * (width / 750) + 'px';
            };
            recalc()
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
        })(document,window);

 

换算方式就是1rem = 100px(注意是设计稿为750)