如何在React中基于视区修改HTML

/* styles.css */
.container {
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

// App.js
import React from 'react';
import './styles.css';

function App() {
  return (
    <div className="container">
      <h1>响应式布局示例</h1>
      {/* 其他内容 */}
    </div>
  );
}

export default App;

// App.js
import React, { useState, useEffect } from 'react';

function App() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768);
    };

    window.addEventListener('resize', handleResize);
    handleResize(); // 初始化时检查视口大小

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div className={`container ${isMobile ? 'mobile' : 'desktop'}`}>
      <h1>响应式布局示例</h1>
      {/* 其他内容 */}
    </div>
  );
}

export default App;