动态响应式设计：J*aScript 持续获取与监听窗口尺寸变化

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

动态响应式设计：J*aScript 持续获取与监听窗口尺寸变化

2025-10-24

浏览次数：次

返回列表

动态响应式设计：javascript 持续获取与监听窗口尺寸变化

本文详细介绍了如何使用 J*aScript 实时获取浏览器窗口的宽度和高度，并持续监听其变化，以实现动态响应式布局。内容涵盖了原生 J*aScript 的事件监听机制和 React 自定义 Hook 的实现方式，并提供了性能优化和最佳实践建议，帮助开发者构建更具适应性的网页应用。

在现代网页开发中，实现响应式设计是至关重要的。除了 CSS 媒体查询，有时我们还需要通过 J*aScript 动态地获取并响应浏览器窗口尺寸的变化，以便调整复杂的布局、组件行为或执行特定的逻辑。本文将深入探讨如何使用 J*aScript 持续获取窗口的宽度和高度。

1. 原生 J*aScript 实现

最直接且兼容性最好的方法是利用 window.innerWidth 和 window.innerHeight 属性，并结合 resize 事件监听器。

核心概念

window.innerWidth: 返回浏览器视口（viewport）的宽度，包括垂直滚动条（如果存在）。
window.innerHeight: 返回浏览器视口的高度，包括水平滚动条（如果存在）。
window.addEventListener('resize', handler): 当浏览器窗口大小发生变化时，会触发 resize 事件，我们可以通过此方法注册一个回调函数来处理这些变化。

示例代码

以下是一个使用原生 J*aScript 持续监听并显示窗口尺寸的示例：

/**
 * 处理窗口尺寸变化的函数
 */
function handleResize() {
  const newWidth = window.innerWidth;
  const newHeight = window.innerHeight;

  // 假设页面中有一个id为"app"的元素用于显示尺寸
  const appElement = document.getElementById("app");
  if (appElement) {
    appElement.innerHTML = `当前窗口宽度: ${newWidth}px, 高度: ${newHeight}px`;
    // 在这里可以执行其他基于新尺寸的逻辑，例如调整布局或重新计算元素位置
  } else {
    console.log(`当前窗口尺寸: 宽度 ${newWidth}px, 高度 ${newHeight}px`);
  }
}

// 1. 页面加载时立即获取一次初始尺寸
handleResize();

// 2. 注册resize事件监听器，以便在窗口大小变化时持续更新
window.addEventListener("resize", handleResize);

// 注意事项：
// 在某些单页应用（SPA）中，如果不再需要监听，
// 应该在组件卸载或页面离开时移除事件监听器，防止内存泄漏。
// window.removeEventListener("resize", handleResize);

注意事项

初始尺寸获取: 在页面加载后，resize 事件并不会立即触发。因此，务必在注册监听器后手动调用一次 handleResize() 函数，以获取并显示初始的窗口尺寸。
事件移除: 为了避免潜在的内存泄漏，尤其是在单页应用（SPA）中，当不再需要监听窗口尺寸变化时（例如，组件卸载或用户导航到其他页面），应该使用 window.removeEventListener('resize', handleResize) 移除事件监听器。

2. React Hook 实现（适用于 React 应用）

在 React 应用中，为了更好地管理状态和副作用，通常会封装一个自定义 Hook 来实现窗口尺寸的持续获取。

核心概念

useState: 用于在函数组件中声明状态变量，这里用于存储窗口的宽度和高度。
useEffect: 用于处理副作用，例如添加和移除事件监听器。它的清理函数（return 的函数）会在组件卸载时执行，自动移除事件监听器。

示例代码

import { useEffect, useState } from 'react';

/**
 * 自定义 Hook，用于获取并持续更新窗口尺寸
 * @returns {object} 包含 width 和 height 属性的对象
 */
export function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined
  });

  useEffect(() => {
    /**
     * 处理窗口尺寸变化的内部函数
     */
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }

    // 1. 注册resize事件监听器
    window.addEventListener('resize', handleResize);

    // 2. 组件挂载时立即调用一次，获取初始尺寸
    handleResize();

    // 3. 返回一个清理函数，在组件卸载时移除事件监听器
    return () => window.removeEventListener('resize', handleResize);
  }, []); // 空数组作为依赖项，确保只在组件挂载和卸载时执行一次

  return windowSize;
}

如何使用

在你的 React 组件中，可以像使用其他 Hook 一样调用 useWindowSize：

import React from 'react';
import { useWindowSize } from './useWindowSize'; // 假设useWindowSize在同一个文件或路径下

function MyResponsiveComponent() {
  const { width, height } = useWindowSize();

  return (
    <div>
      <h1>我的响应式组件</h1>
      <p>当前窗口宽度: {width || '未知'}px</p>
      <p>当前窗口高度: {height || '未知'}px</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1070">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680049013074.png" alt="Mureka">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1070">Mureka</a>
                            <p>Mureka是昆仑万维最新推出的一款AI音乐创作工具，输入歌词即可生成完整专属歌曲。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Mureka">
                                <span>1091</span>
                            </div>
                        </div>
                        <a href="/ai/1070" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Mureka">
                        </a>
                    </div>
                
      {/* 根据width和height值渲染不同的内容或样式 */}
      {width && width < 768 ? (
        <p>这是一个移动设备布局</p>
      ) : (
        <p>这是一个桌面设备布局</p>
      )}
    </div>
  );
}

export default MyResponsiveComponent;

3. 性能优化：防抖（Debounce）与节流（Throttle）

resize 事件在用户拖动窗口时会频繁触发，如果事件处理函数中包含复杂的计算或 DOM 操作，可能会导致性能问题。为了优化性能，我们可以使用防抖（Debounce）或节流（Throttle）技术。

防抖 (Debounce): 在事件触发后，等待一个指定的时间间隔，如果在这段时间内事件再次触发，则重新计时。只有当事件停止触发一段时间后，处理函数才会被执行一次。适用于需要等待用户操作完全停止后再执行的场景。
节流 (Throttle): 在指定的时间间隔内，无论事件触发多少次，处理函数最多只执行一次。适用于需要持续响应但不需要过于频繁响应的场景。

示例：使用防抖优化

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}

const debouncedHandleResize = debounce(handleResize, 200); // 设置200毫秒的防抖延迟

// 注册防抖后的事件监听器
window.addEventListener("resize", debouncedHandleResize);

// 别忘了初始调用
handleResize(); // 初始调用不需要防抖

在 React Hook 中也可以类似地应用防抖或节流，通常会将 debounce 或 throttle 函数封装在 useEffect 内部，或者作为独立的工具函数引入。

4. 其他相关尺寸属性

除了 window.innerWidth 和 window.innerHeight，还有一些其他与尺寸相关的属性，了解它们可以帮助你更精确地控制布局：

document.documentElement.clientWidth / clientHeight: 返回文档根元素（html>）的视口宽度和高度，不包括滚动条。在某些情况下，这可能比 window.innerWidth/innerHeight 更符合你的需求。
screen.width / screen.height: 返回用户设备屏幕的宽度和高度，与浏览器窗口大小无关。这通常用于了解用户设备的物理屏幕尺寸。
element.offsetWidth / offsetHeight: 返回特定 DOM 元素的布局宽度和高度，包括内边距、边框和滚动条。

总结

无论是原生 J*aScript 还是 React 等前端框架，持续获取浏览器窗口尺寸的核心机制都是利用 window.addEventListener('resize', handler)。通过结合 window.innerWidth/innerHeight 和适当的性能优化（如防抖或节流），开发者可以构建出高度响应式且性能优异的网页应用。理解并熟练运用这些技术，是实现动态和自适应用户体验的关键。

以上就是动态响应式设计：J*aScript 持续获取与监听窗口尺寸变化的详细内容，更多请关注其它相关文章！

# 适用于 # 网站推广是按次收费 # 四会网站建设价格 # 市建委建设工程信息网站 # 杭州seo网站外链 # 淘宝seo推广运营 # 网站怎么在百度付费推广 # 地坪网站建设在线咨询 # 信息seo优化规划 # 韩国语学习网站建设 # Seo3o_c # 这是一个 # 单选框 # 如何使用 # 滚动条 # 自定义 # css # 表单 # 回调 # 移除 # 防抖 # wi # 工具 # 回调函数 # app # 浏览器 # windows # 前端 # html # java # javascript # react

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：在css中link标签media属性使用技巧

下一篇：CSS表格宽度设置疑难：右侧表格宽度无法生效的解决方案

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

动态响应式设计：J*aScript 持续获取与监听窗口尺寸变化

1. 原生 J*aScript 实现

核心概念

示例代码

注意事项

2. React Hook 实现（适用于 React 应用）

核心概念

示例代码

如何使用

3. 性能优化：防抖（Debounce）与节流（Throttle）

示例：使用防抖优化

4. 其他相关尺寸属性

总结