JavaScript 程序如何实现 resize 的操作

JavaScript 程序可以通过监听窗口的 resize 事件、修改 DOM 元素的样式或使用 CSS3 的媒体查询来实现响应式设计，实现 resize 操作。监听 resize 事件 允许在窗口发生变化时进行动态调整，修改 DOM 元素的样式 可以直接改变元素大小，而 CSS3 媒体查询 则提供了一种基于不同屏幕尺寸改变样式的机制。监听 resize 事件是最直接的方法，它允许开发者注册一个回调函数，该函数会在浏览器窗口尺寸变动时被调用。开发者可以利用这个特性来调整页面布局或执行必要的脚本，以应对不同尺寸的显示需求。

一、监听窗口 RESIZE 事件

JavaScript 提供了 window.addEventListener 方法来注册事件监听器。通过监听 resize 事件，开发者可以在窗口大小变化时执行特定代码。

理解 RESIZE 事件

当浏览器窗口的尺寸发生变化时，resize 事件就会被触发。监听这一事件的基本语法如下：

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

动态调整布局

在 resize 事件的回调函数中，开发者可以获取当前窗口的宽度和高度，并根据这些值动态调整页面元素的大小和布局。

window.addEventListener('resize', function() {
    let viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    let viewportHeight = window.innerHeight || document.documentElement.clientHeight;
    // 利用viewportWidth和viewportHeight调整布局
});

二、修改 DOM 元素的样式

对于更精细的控制，直接通过 JavaScript 修改 DOM 元素的样式是一个有效的方法。这种方法通常与事件监听相结合，以实现更加复杂的响应式设计。

直接操作样式

可以通过 JavaScript 访问和修改 DOM 元素的 style 属性来直接更改元素的样式。

// 获取一个 DOM 元素
let element = document.getElementById('myElement');
// 在窗口大小变化时修改该元素的宽度
window.addEventListener('resize', function() {
    element.style.width = "50%";
});

使用 CSS 变量

CSS 变量（自定义属性）可以配合 JavaScript 使用，让样式调整更加灵活。

// 设置一个 CSS 变量
document.documentElement.style.setProperty('--my-variable', '100px');
// 然后在 CSS 中使用这个变量
// .myClass {
//   width: var(--my-variable);
// }

三、使用 CSS3 媒体查询

媒体查询是 CSS3 提供的功能，它允许在 CSS 中根据不同的媒体类型或设备的特性来应用不同的样式。

基本使用

媒体查询通常在 CSS 文件中使用，无需 JavaScript 介入。下面是媒体查询的一个简单例子：

@media (max-width: 600px) {
  .example {
    background-color: lightblue;
  }
}

和 JavaScript 的结合

尽管媒体查询主要在 CSS 中使用，但 JavaScript 提供了 window.matchMedia 方法和 MediaQueryList 对象，允许在脚本中动态处理媒体查询。

let mediaQueryList = window.matchMedia('(max-width: 600px)');
mediaQueryList.addListener(function(e) {
    if (e.matches) {
        // 当视口小于 600px 时执行
    } else {
        // 当视口大于 600px 时执行
    }
});

四、结合使用不同的方法

在实际开发过程中，通常需要综合使用不同的方法来实现复杂的响应式设计。

实现复杂响应式布局

利用 resize 事件监听和媒体查询可以实现不同尺寸设备上的复杂布局调整。

window.addEventListener('resize', resizeThrottler, false);
let resizeTimeout;
function resizeThrottler() {
    // 忽略连续的resize事件并在500ms后执行实际的resize处理
    if (!resizeTimeout) {
        resizeTimeout = setTimeout(function() {
            resizeTimeout = null;
            actualResizeHandler();
        // 500ms是一个选择性的延迟时间，可以根据实际应用调整
        }, 500);
    }
}
function actualResizeHandler() {
    // 实际处理resize事件的代码
}