# 注释：rem适配，基于iphone6，一倍设计稿 计算方式 1rem = 根元素字体大小 
1、根据分辨率动态计算根元素尺寸
(function (doc, win) {
        var dpr = win.devicePixelRatio,
            scale = 1;
        var metaEl = doc.querySelector('meta[name="viewport"]');
        //动态改写meta:viewport标签
        if (!metaEl) {
            metaEl = doc.createElement('meta');
            metaEl.setAttribute('name', 'viewport');
            metaEl.setAttribute('content', 'width=device-width,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no');
            document.documentElement.firstElementChild.appendChild(metaEl);
        } else {
            metaEl.setAttribute('content', 'width=device-width,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no');
        }
        var fn = function () {
            //获取的是物理像素，设备横向分辨率
            var deviceWidth = doc.documentElement.clientWidth;
            var fontSize = deviceWidth * 10 / 37.5;
            doc.documentElement.setAttribute('style', 'font-size:' + fontSize + 'px!important');
        }
        window.addEventListener('orientationchange' in win ? 'orientationchange' : 'resize', fn, false);
        doc.addEventListener('DOMContentLoaded', fn, false);

    })(document, window)
2、根据dpr设置不同的更元素字体大小
以下是dpr相关的js：
(function(doc,win){
        var docEl=win.document.documentElement;
        var metaEl=doc.querySelector('meta[name="viewport"]');
        var dpr=win.devicePixelRatio;
        var scale=1/dpr;
        //对iOS设备进行dpr的判断，对于Android系列，始终认为其dpr为1，安卓dpr bug较多
        if(!dpr&&!scale){
            var isIPhone=win.navigator.appVersion.match(/[iphone|ipad]/gi);
            var devicePixelRatio=win.devicePixelRatio;
            if(isIPhone){
                dpr=devicePixelRatio;
            }else{
                dpr=1;
            }
            scale=1/dpr;
        }
        /**
         *================================================
         *设置data-dpr和viewport
         ×================================================
         */
        docEl.setAttribute('data-dpr',dpr);
        //动态改写meta:viewport标签
        if(!metaEl){
            metaEl=doc.createElement('meta');
            metaEl.setAttribute('name','viewport');
            metaEl.setAttribute('content','width=device-width,initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');
            document.documentElement.firstElementChild.appendChild(metaEl);
        }else{
            metaEl.setAttribute('content','width=device-width,initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');
        }
    })(document,window);
以下是dpr相关的css：
html[data-dpr=2] { font-size: 32px }
html[data-dpr=3] { font-size: 48px }

其他移动适配方案

1、可使用媒体查询，在不同尺寸设置根元素（html）的字体大小 2、可使用vw和vh，也可实现适配，配合rem更好；使用vw设置根元素字体大小，其他元素使用rem