移动端rem布局

移动端布局的核心就是,设置好html跟标签,的动态大小

直接上代码

   

       

       

       

       

       

       

       

       

   

   

       

           

375 * 150

           

               

                   

•                         60 * 60

                          导航入口

                     

                   

•                         60 * 60

                          导航入口

                     

                   

•                         60 * 60

                          导航入口

                     

               

           

           

               

填写信息

               

                   

                        姓名

                       

                   

                   

                        手机

                       

                   

               

               

个人介绍

               

                   

                       

                   

               

               

                    确认

               

           

           

375 * 75

       

   

js代码:

!(function() {

    var docElem = document.documentElement,

        metaElem = document.querySelector('meta[name="viewport"]'),

        dpr = window.devicePixelRatio || 1,

        // 将页面分为10块

        blocks = 10,

        // 需要限制的最小宽度

        defaultMinWidth = 320,

        // 需要限制的最大宽度

        defaultMaxWidth = 540,

        // 计算的基准值

        calcMaxWidth = 9999999;

    if (!metaElem) {

        metaElem = initMetaViewport();

    }

    if (metaElem.getAttribute('data-content-max') !== null) {

        calcMaxWidth = defaultMaxWidth;

    }

    // 确保meta[name="viewport"]存在

    function initMetaViewport() {

        var meta = document.createElement('meta');

        meta.setAttribute('name', 'viewport');

        meta.setAttribute('content', 'width=device-width,initial-scale=1,user-scalable=no');

        document.head.appendChild(meta);

        return meta;

    }

    // 大部分dpr为2以下的安卓机型不识别scale，需设置不缩放

    if (navigator.appVersion.match(/android/gi) && dpr <= 2) {

        dpr = 1;

    }

    setScale(dpr);

    // 企业QQ设置了scale后，不能完全识别scale（此时clientWidth未收到缩放的影响而翻倍），需设置不缩放

    if (navigator.appVersion.match(/qq\//gi) && docElem.clientWidth <= 360) {

        dpr = 1;

        setScale(dpr);

    }

    docElem.setAttribute('data-dpr', dpr);

    // 设置缩放

    function setScale(dpr) {

        metaElem.setAttribute('content', 'initial-scale=' + 1 / dpr + ',maximum-scale=' + 1 / dpr + ',minimum-scale=' + 1 / dpr + ',user-scalable=no');

    }

    // 设置docElem字体大小

    function setFontSize() {

        var clientWidth = docElem.clientWidth;

        clientWidth = Math.max(clientWidth, defaultMinWidth * dpr)

        // 调整计算基准值

        if (calcMaxWidth === defaultMaxWidth) {

            clientWidth = Math.min(clientWidth, defaultMaxWidth * dpr);

        }

        docElem.style.fontSize = clientWidth / blocks + 'px';

    }

    setFontSize();

    window.addEventListener(window.orientationchange ? 'orientationchange' : 'resize', setFontSize, false);

})();

最后css代码

.f-p-0{padding:0 !important}html,body{margin:0;padding:0}html body{margin-right:auto;margin-left:auto;min-width:320px}@media (-webkit-device-pixel-ratio: 2){html body{min-width:640px}}@media (-webkit-device-pixel-ratio: 3){html body{min-width:960px}}html body[data-content-max]{margin-right:auto;margin-left:auto;max-width:540px}@media (-webkit-device-pixel-ratio: 2){html body[data-content-max]{max-width:1080px}}@media (-webkit-device-pixel-ratio: 3){html body[data-content-max]{max-width:1620px}}html[data-dpr="1"] body{min-width:320px}body{border-width:45px;background-color:#f8f8f8;font-size:.3733333333rem;font-family:"Microsoft YaHei"}.container{background-color:#fff}header{height:4rem;line-height:4rem;text-align:center;background-color:#f2f2f2}nav ul{display:flex;justify-content:space-around;padding:0}nav ul li{display:flex;flex-wrap:wrap;width:2.6666666667rem;justify-content:center}nav ul .icon{margin-bottom:.2666666667rem;width:1.6rem;height:1.6rem;line-height:1.6rem;text-align:center;background-color:#f2f2f2}main{padding:.2666666667rem}main h3{position:relative;margin-top:.6666666667rem;margin-left:.3466666667rem;font-size:.4rem}main h3:before{content:"";position:absolute;left:-.2666666667rem;width:.16rem;height:100%;background-color:#fc8200}.info-items{margin-top:.2666666667rem;margin-bottom:.2666666667rem}.info-item{margin-top:.2666666667rem;padding:.4rem;padding-left:0;border:1px solid #ddd;display:flex}.info-item span{min-width:1.6rem;text-align:center;border-right:1px solid #ddd}.info-item input{width:100%;border:none;font-size:.3733333333rem;caret-color:#fc8200;outline:none}.info-item textarea{padding:.2666666667rem;width:100%;border:none;height:3.3333333333rem;font-size:.3733333333rem;font-family:"Microsoft YaHei";caret-color:#fc8200;-webkit-text-size-adjust:none;text-size-adjust:none}.info-confirm{margin-bottom:.5333333333rem;text-align:center}.info-confirm__btn{display:inline-block;margin-top:1.0666666667rem;width:2.6666666667rem;height:1.0666666667rem;line-height:1.0666666667rem;text-align:center;background-color:#fc8200;text-decoration:none !important;color:#fff !important}footer{height:2rem;line-height:2rem;text-align:center;background-color:#f2f2f2}

/*# sourceMappingURL=rem.css.map */