js监听浏览器窗口大小，JS自动适应浏览器窗口大小

1. 监听浏览器窗口大小的方法

在开发中，我们经常需要对页面元素进行自适应布局，而这就要求我们能够实时获取浏览器窗口的大小变化。下面介绍几种常用的 JS 监听浏览器窗口大小变化的方法。

1) window.onresize：该方法表示浏览器窗口大小发生变化时触发的事件，可以通过在 JS 中监听该事件来实现自适应布局。

2) document.documentElement.clientWidth 和 document.documentElement.clientHeight：这两个属性可以获取当前浏览器窗口的宽度和高度，但是在 IE6/7/8 中无法获取正确的值。

3) window.innerWidth 和 window.innerHeight：这两个属性可以获取当前浏览器窗口的宽度和高度，但是在 IE6/7/8 中也无法获取正确的值。

2. JS 自动适应浏览器窗口大小的实现

了解了几种监听浏览器窗口大小的方法后，我们可以通过编写 JS 代码来实现自动适应浏览器窗口大小的效果。

下面以自适应网页背景图片大小为例进行说明：

// 获取背景图片元素

var bgImg = document.getElementById('bg-img');
// 监听浏览器窗口大小变化
window.onresize = function() {
    // 获取浏览器窗口的宽度和高度
    var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    // 设置背景图片的宽度和高度
    bgImg.style.width = windowWidth + 'px';
    bgImg.style.height = windowHeight + 'px';
}

3. 适用场景

JS 自动适应浏览器窗口大小的效果适用于以下情况：

1) 网页中需要进行自适应布局的情况，如网页背景图片、图片轮播等。

2) 需要实时获取浏览器窗口大小的情况，如响应式页面。

4. 注意事项

在实现自动适应浏览器窗口大小的效果时，需要注意以下几点：

1) 需要考虑兼容性问题，尤其在 IE6/7/8 中无法正确获取浏览器窗口大小的情况下，需要通过其他方式实现。

2) 需要考虑性能问题，浏览器窗口大小变化时会频繁触发事件，需要对代码进行优化。

5. 结语

监控浏览器窗口大小是页面响应式布局的基础之一，JS 自动适应浏览器窗口大小可以帮助我们轻松实现自适应布局。希望本文能够对大家有所帮助。

文章TAG：js监听浏览器窗口大小  JS自动适应浏览器窗口大小