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=" 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>