常用移动端自适应布局-rem

@media (min-width:320px){html{font-size:42.7px;}}
@media (min-width:360px){html{font-size:48px;}}
@media (min-width:375px){html{font-size:50px;}}
@media (min-width:384px){html{font-size:51.2px;}}
@media (min-width:414px){html{font-size:55.2px;}}
@media (min-width:448px){html{font-size:59.7px;}}
@media (min-width:480px){html{font-size:48px;}}
@media (min-width:512px){html{font-size:68.3px;}}
@media (min-width:544px){html{font-size:72.5px;}}
@media (min-width:576px){html{font-size:76.8px;}}
@media (min-width:608px){html{font-size:81.1px;}}
@media (min-width:640px){html{font-size:85.3px;}}
@media (min-width:750px){html{font-size:100px;}}
这是页面初始化使用的。为了配合所有手机页面还有一段js:

(function (doc_01, win_01) {
    var docEl_01 = doc_01.documentElement;
    var resizeEvt_01 = 'orientationchange' in window ? 'orientationchange' : 'resize';
    var recalc_01 = function () {
        var clientWidth_01 = docEl_01.clientWidth;
        var clientheight_01 = docEl_01.clientHeight;
        if (!clientWidth_01) return;
        if(clientWidth_01<1024)
        {
            docEl_01.style.fontSize = (clientWidth_01 /750*100).toFixed(1)+'px';
        }
        else
        {
            docEl_01.style.fontSize = 100+'px';
        }
    };
    recalc_01();
    if (!doc_01.addEventListener) return;
    win_01.addEventListener(resizeEvt_01, recalc_01, false);
})(document,window);

设计稿为750px。可以直接使用rem。亲测开发有效。