pc端的弹性布局适配方案

方案及原理:使用rem单位,通过window.onresize来监听浏览器窗口,获取窗口宽度,并改变跟字体大小来达到弹性适配效果。

function adaptor(){
                //为了便于计算,这里以1920px为基准
                let width = document.body.clientWidth
                let fontSize = document.getElementsByTagName('html')[0].style.fontSize = width / 19.2 + "px";
            }
            adaptor();
            window.onresize = function() {
                adaptor()
            }

实际效果如下:

 

posted @ 2019-03-01 09:12  枫鸟~  阅读(700)  评论(0编辑  收藏  举报