移动端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, ) : ,//iframe引用时，禁止缩放

            dpr = ,

            scale =  / 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 > ) {

                    width =  * dpr;

                }  这个if判断是判断大于750的情况下 恒等于750

                // 乘以100，px : rem = 100 : 1

                docEl.style.fontSize =  * (width / ) + 'px';

            };

            recalc()

            if (!doc.addEventListener) return;

            win.addEventListener(resizeEvt, recalc, false);

        })(document,window);

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