rem布局

rem以单位进行布局 实现宽高自适应的布局

em:当前元素一个字体的大小

 <style>
        
.box {
            position: relative;
            width: 6.4rem;
            height: 3rem;
            background-color: hotpink;
            margin: 0 auto;
        }
        img {
            position: absolute;
            left: .3rem;
            top: .9rem;
            width: 1.2rem;
            height: 1.2rem;
        }

        .right {
            position: absolute;
            right: .4rem;
            top: .5rem;
            width: 3rem;
            height: 2rem;
            background-color: yellow;
            font-size: 1rem;
            text-align: center;
            line-height: 2rem;
        }


        </style>
<script src="./rem.js"></script>
    </head>

    <body>

        <div class="box">
            <img src="REM.png" alt="">
            <div class="right">
                REM
            </div>
        </div>
    

    </body>

rem.js

(function () {
    //动态设置rem的值
    // 在设计稿640px 情况 ，设置1rem = 100px 
    // 推算1rem 在其他屏幕 取值 
    // 根据媒体查询检测当前屏幕宽度，根据宽取设置rem的值   
    //当前值 = 当前屏幕宽度/640*100
    //design 设计稿宽
    function setRem(design) {
        
        //1获取当前屏幕的宽度
        var width = window.innerWidth;
        // console.log(width);
        if (width > 640) {
            width = 640;
        }
        if(width < 320) {
            width = 320;
        }

        //动态设置rem的值
        document.querySelector('html').style.fontSize = width/design*100 + 'px';
        
    }

    setRem(640);

    //检测屏幕宽度变化，实时动态设置
    window.onresize = function () {
        setRem(640);
    }
})();

 rem.css

/* 480  1rem : 75px 
414  1rem : 64.6875px
375  1rem:  58.59375px
360  1rem : 56.25px
320  1rem:  50px  */

/* 动态检测屏幕的宽度，根据不同宽度设置rem的值 */

@media screen and (min-width: 640px) {
    html {
        font-size: 100px;
    }
}
/* 诺基亚 */
@media screen and (max-width: 639px) and (min-width: 480px) {
    html {
        font-size: 75px;
    }
}

/* ip6/7/8p */
@media screen and (max-width: 479px) and (min-width: 414px) {
    html {
        font-size: 64.6875px
    }
}

/* ip6/7/8 */
@media screen and (max-width: 413px) and (min-width: 375px) {
    html {
        font-size:  58.59375px
    }
}

/* 三星 */
@media screen and (max-width: 374px) and (min-width: 360px) {
    html {
        font-size:  56.25px
    }
}

/* ip3/4/5 */

@media screen and (max-width: 359px) {
    html {
        font-size:  50px
    }
}

 

posted on 2019-09-25 11:20  宅到深夜  阅读(266)  评论(0)    收藏  举报