移动端rem弹性布局关键js代码

<script>
        var c = () => {
            let w = document.documentElement.clientWidth;
            let n = 20 * (w / 400) > 40 ? 40 + "px" : 20 * (w / 400) + "px";
            document.documentElement.style.fontSize = n;
        };
        window.addEventListener("load", c);
        window.addEventListener("resize", c);
</script>

代码介绍:先获取到设备宽度,定义宽度为400的设备的1rem等于20px,如果宽度为800的设备根据我们的计算公式可得:20*(800/400)= 40px 当设宽度变大我们相应的rem也变大,这就是rem弹性布局的原理了。

理解了代码的含义,就可以直接copy上面这段代码来进行我们的移动端rem弹性布局了。

f090d5b8fe7bcb331c941ce83d3f9964

 

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容