HTML窗口大小监听：实现页面自适应的关键

01-24 9659阅读

在网页开发中，实现页面的自适应布局是一个重要的需求。而监听HTML窗口大小的变化，能够让我们根据窗口的尺寸动态调整页面的样式和布局，提供更好的用户体验。

监听窗口大小变化的基本原理

在JavaScript中，可以通过window对象的resize事件来监听窗口大小的变化。当窗口大小发生改变时，会触发resize事件，我们可以在事件处理函数中编写相应的代码来执行需要的操作。

window.addEventListener('resize', function() {
    // 这里可以编写窗口大小变化时执行的代码
});

获取窗口大小的方法

在事件处理函数中，我们需要获取当前窗口的大小。可以通过window对象的innerWidth和innerHeight属性来获取窗口的宽度和高度。

HTML窗口大小监听：实现页面自适应的关键

window.addEventListener('resize', function() {
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    console.log('窗口宽度：' + windowWidth + '，窗口高度：' + windowHeight);
});

根据窗口大小调整页面布局

根据获取到的窗口大小，可以动态调整页面的布局。例如，当窗口宽度小于某个值时，将页面的导航栏切换为响应式布局。

<!DOCTYPE html>
<html>

<head>
    <style>
        nav {
            background-color: #333;
            color: white;
            padding: 10px;
        }

       .responsive-nav {
            display: none;
        }

        @media (max-width: 600px) {
           .responsive-nav {
                display: block;
            }

            nav {
                display: none;
            }
        }
    </style>
</head>

<body>
    <nav>
        <ul>
            <li>首页</li>
            <li>关于</li>
            <li>联系我们</li>
        </ul>
    </nav>
    <nav class="responsive-nav">
        <ul>
            <li>首页</li>
            <li>关于</li>
            <li>联系我们</li>
        </ul>
    </nav>

    <script>
        window.addEventListener('resize', function() {
            var windowWidth = window.innerWidth;
            if (windowWidth <= 600) {
                document.querySelector('nav').style.display = 'none';
                document.querySelector('.responsive-nav').style.display = 'block';
            } else {
                document.querySelector('nav').style.display = 'block';
                document.querySelector('.responsive-nav').style.display = 'none';
            }
        });
    </script>
</body>

</html>

优化页面性能

在频繁监听窗口大小变化时，可能会对页面性能产生一定影响。可以通过节流（throttle）或防抖（debounce）技术来优化性能。

节流是指在一定时间内，只执行一次事件处理函数。例如，每100毫秒执行一次。

function throttle(func, delay) {
    let timer = null;
    return function() {
        if (!timer) {
            func.apply(this, arguments);
            timer = setTimeout(() => {
                timer = null;
            }, delay);
        }
    };
}

window.addEventListener('resize', throttle(function() {
    // 处理窗口大小变化的代码
}, 100));

防抖是指在一定时间内，事件触发后延迟执行事件处理函数。如果在延迟时间内再次触发事件，则重新计时。

function debounce(func, delay) {
    let timer = null;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, arguments);
        }, delay);
    };
}

window.addEventListener('resize', debounce(function() {
    // 处理窗口大小变化的代码
}, 100));