当前位置：首页 > React

react响应式布局如何实现

2026-01-25 01:12:52React

响应式布局的核心概念

React响应式布局的核心在于根据屏幕尺寸动态调整UI结构和样式。通过结合CSS媒体查询、Flexbox/Grid布局以及React的状态管理，可以构建适应不同设备的界面。

使用CSS媒体查询

在React组件中直接引入CSS媒体查询是最基础的方法。创建单独的CSS文件或使用内联样式，通过@media规则定义不同断点的样式：

/* 组件对应的CSS文件 */
.container {
  width: 100%;
}

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

通过className属性将样式应用到React组件：

function MyComponent() {
  return <div className="container">内容</div>;
}

使用Flexbox或Grid布局

CSS的Flexbox和Grid布局天然支持响应式。结合React组件结构，可以创建灵活的布局系统：

function ResponsiveGrid() {
  return (
    <div style={{ 
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
      gap: '16px'
    }}>
      {[...Array(6)].map((_, i) => (
        <div key={i} style={{ background: '#eee', height: '100px' }} />
      ))}
    </div>
  );
}

使用React Hook监听窗口尺寸

通过useState和useEffect钩子动态获取窗口尺寸，实现更精细的控制：

import { useState, useEffect } from 'react';

function ResponsiveComponent() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

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

  return (
    <div>
      {windowSize.width < 768 ? (
        <MobileView />
      ) : (
        <DesktopView />
      )}
    </div>
  );
}

使用第三方库简化实现

流行的React响应式库如react-responsive或@mui/material提供了更便捷的API：

import { useMediaQuery } from 'react-responsive';

function Component() {
  const isMobile = useMediaQuery({ query: '(max-width: 768px)' });

  return isMobile ? <MobileView /> : <DesktopView />;
}

Material-UI的隐藏工具：

import { Hidden } from '@mui/material';

function Component() {
  return (
    <>
      <Hidden smDown>
        <DesktopView />
      </Hidden>
      <Hidden mdUp>
        <MobileView />
      </Hidden>
    </>
  );
}

图片和媒体的响应式处理

使用<picture>元素或CSS的max-width属性确保媒体内容自适应：

react响应式布局如何实现

function ResponsiveImage() {
  return (
    <img
      src="large.jpg"
      srcSet="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w"
      sizes="(max-width: 600px) 480px, 800px"
      style={{ maxWidth: '100%', height: 'auto' }}
      alt="响应式图片"
    />
  );
}