JavaScript监听浏览器窗口的变化

 

 

JQuery

$(window).resize(function () {          //当浏览器大小变化时
    alert($(window).height());          //浏览器时下窗口可视区域高度
    alert($(document).height());        //浏览器时下窗口文档的高度
    alert($(document.body).height());   //浏览器时下窗口文档body的高度
    alert($(document.body).outerHeight(true)); //浏览器时下窗口文档body的总高度 包括border padding margin
});

 

 

JavaScript的resize事件

window.addEventListener('load', function() {
    console.log(window.innerWidth);
    
    window.addEventListener('resize', function() {
        console.log(window.innerWidth);
    })

})

 

 

定时器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div style="width: 2.6rem;height:1.6rem;border: 1px solid black">

</div>
</body>
<script>
  refresh();
  window.onresize = function () {  //监听屏幕的改变
    setTimeout(function () {
      refresh();
    }, 10)
  };

  function refresh() {
    let devicewidth = document.documentElement.clientWidth;
    console.log(devicewidth);
    if (devicewidth > 1200) {
      document.documentElement.style.fontSize = 1200 / 12 + "px"
    } else {
      document.documentElement.style.fontSize = devicewidth / 7.5 + "px"  //设计稿物理分辨率（750）/100
    }
  }
</script>
</html>

 

posted @ 2021-12-20 14:35  漫漫长路</>  阅读(2511)  评论(0)  编辑  收藏  举报