# Note: REM adaptation, based on iphone6, one times the design design calculation method 1rem = root element font size1Dynamically calculate root element size according to resolution (function (doc, win) {
        var dpr = win.devicePixelRatio,
            scale = 1;
        var metaEl = doc.querySelector('meta[name="viewport"]');
        // Dynamically overwrite the meta: viewPort tag
        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 () {
            // Get physical pixels, device horizontal resolution
            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< font size > < font size >function(doc,win){
        var docEl=win.document.documentElement;
        var metaEl=doc.querySelector('meta[name="viewport"]');
        var dpr=win.devicePixelRatio;
        var scale=1/dpr;
        // Determine the DPR of iOS devices. For Android series, DPR is always considered as 1. Android DPR has many bugs
        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;
        }
        / * * * = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * set data - the DPR and viewport X = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /
        docEl.setAttribute('data-dpr',dpr);
        // Dynamically overwrite the meta: viewPort tag
        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); The following is the DPR related CSS: HTML [data-dpr=2] { font-size: 32px }
html[data-dpr=3] { font-size: 48px }
Copy the code

Other mobile adaptation solutions

1, can use media query, set the font size of the root element (HTML) in different sizes 2, can use VW and VH, also can achieve adaptation, with REM better; Use VW to set the font size for the root element and REM for the other elements