移动端rem自适应屏幕两种方案

css:

@charset "utf-8";
/*12px===0.6rem   设计图字体大小/20=开发字体大小+rem*/
html {
    font-size: 107%; -webkit-text-size-adjust:none; text-size-adjust:none;
}
@media only screen and ( min-width: 320px) {
    html {
        font-size: 107%!important;
    }
}
@media only screen and ( min-width: 360px) {
    html {
        font-size: 120%!important;
    }
}
@media only screen and ( min-width: 375px) {
    html {
        font-size: 125%!important;
        
    }
}
@media only screen and ( min-width: 414px) {
    html {
        font-size: 138%!important;
    }
}

javascript

/*改变字体大小*/
(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';
    //750是设计图的宽度,10是一个基准宽度(html的font-size值)
  };

if (!doc.addEventListener) return;    
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

/*---改变缩放比---*/
var iScale = 1;
iScale = iScale / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">')