js resize

// 监听窗口大小变化的示例代码

// 1. 使用 window.addEventListener('resize', callback) 方法来监听窗口大小的变化

window.addEventListener('resize', function() {
    console.log('窗口大小已改变');
    console.log('当前窗口宽度: ' + window.innerWidth);
    console.log('当前窗口高度: ' + window.innerHeight);
});

// 2. 如果需要在窗口大小变化时执行一些特定的操作，可以在回调函数中添加相应的逻辑

function handleResize() {
    // 获取窗口的当前宽度和高度
    const width = window.innerWidth;
    const height = window.innerHeight;

    // 根据窗口大小调整页面布局或其他操作
    if (width < 600) {
        console.log('窗口宽度小于600px，可以调整为移动设备布局');
    } else {
        console.log('窗口宽度大于等于600px，可以调整为桌面布局');
    }
}

// 添加 resize 事件监听器
window.addEventListener('resize', handleResize);

// 3. 如果需要在页面加载时也执行一次相同的逻辑，可以在页面加载时调用 handleResize 函数

window.addEventListener('load', handleResize);

解释说明：

• window.addEventListener('resize', callback)：当浏览器窗口的大小发生变化时，会触发 resize 事件。我们可以通过这个事件来监听窗口大小的变化，并在回调函数中执行相应的操作。
• window.innerWidth 和 window.innerHeight：分别返回窗口的当前宽度和高度。
• handleResize 函数：在这个函数中可以根据窗口的大小执行不同的逻辑，比如调整页面布局、修改样式等。
• window.addEventListener('load', handleResize)：确保页面加载完成时也执行一次 handleResize 函数，以确保初始状态下页面布局正确。

如果你只需要简单的监听窗口大小变化并输出信息，可以直接使用第一部分的代码。如果需要更复杂的逻辑处理，则可以参考第二部分的代码结构。