JavaScript实现响应式布局：实时获取与监听屏幕尺寸变化

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`;
    // 在这里可以根据newWidth和newHeight进行其他DOM操作或样式调整
    // 例如：
    // if (newWidth < 768) {
    //   document.body.classList.add('mobile-layout');
    // } else {
    //   document.body.classList.remove('mobile-layout');
    // }
  }
}

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

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

// 在需要停止监听时，可以调用：
// window.removeEventListener("resize", handleResize);

import { useEffect, useState } from 'react';

/**
 * 一个自定义React Hook，用于实时获取并返回窗口的宽度和高度。
 *
 * @returns {{width: number | undefined, height: number | undefined}} 包含当前窗口宽度和高度的对象。
 */
export function useWindowSize() {
  // 使用useState来存储窗口尺寸，初始值设为undefined
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined
  });

  useEffect(() => {
    // 定义处理窗口resize事件的函数
    function handleResize() {
      // 更新state中的窗口尺寸
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }

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

    // 首次渲染时立即调用一次，获取初始尺寸
    handleResize();

    // 返回一个清理函数，在组件卸载时移除事件监听器
    return () => window.removeEventListener('resize', handleResize);
  }, []); // 空依赖数组表示此Effect只在组件挂载和卸载时运行

  return windowSize;
}

import React from 'react';
import { useWindowSize } from './useWindowSize'; // 假设useWindowSize Hook在同级目录下

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

  if (width === undefined || height === undefined) {
    return <div>正在加载尺寸信息...</div>;
  }

  return (
    <div>
      <h1>我的响应式组件</h1>
      <p>当前窗口宽度: {width}px</p>
      <p>当前窗口高度: {height}px</p>
      {width < 768 ? (
        <p>这是一个移动设备布局。</p>
      ) : (
        <p>这是一个桌面设备布局。</p>
      )}
      {/* 根据width和height进行其他逻辑或渲染 */}
    </div>
  );
}

export default MyResponsiveComponent;