React应用中实现移动端与桌面端加载不同SVG图片的方案咨询

这问题我之前做项目时也碰到过，给你几个实用的方案，你可以根据自己的需求来选：

方案1：CSS媒体查询控制显示隐藏 #

这是最直接省心的方法，把两个SVG都放在组件里，用CSS根据屏幕尺寸控制显示/隐藏：

首先在MySvgImage.js里渲染两个SVG，分别加上不同的类名：

import './MySvgImage.css';

const MySvgImage = () => {
  return (
    <div className="svg-container">
      {/* 移动端SVG */}
      <svg className="svg-mobile" viewBox="0 0 200 500">
        {/* 你的移动端SVG代码 */}
      </svg>
      {/* 桌面端SVG */}
      <svg className="svg-desktop" viewBox="0 0 800 500">
        {/* 你的桌面端SVG代码 */}
      </svg>
    </div>
  );
};

export default MySvgImage;

然后在MySvgImage.css里写媒体查询（这里用768px作为移动端/桌面端的分界，你可以根据自己的需求调整）：

.svg-container {
  position: relative;
  width: 100%;
}

.svg-mobile, .svg-desktop {
  width: 100%;
  height: auto;
}

/* 桌面端显示桌面SVG，隐藏移动端 */
@media (min-width: 768px) {
  .svg-mobile {
    display: none;
  }
}

/* 移动端显示移动端SVG，隐藏桌面端 */
@media (max-width: 767px) {
  .svg-desktop {
    display: none;
  }
}

这个方法的好处是实现简单，不需要额外的React逻辑，适合纯样式控制的场景。

方案2：React动态渲染（useMediaQuery） #

如果你需要更灵活的控制（比如根据断点触发其他逻辑），可以用React状态配合媒体查询来动态渲染对应的SVG，这样DOM里只会出现当前需要的SVG，不会有冗余元素。

方法A：自定义媒体查询钩子 #

自己写个简单的钩子监听屏幕尺寸：

import { useState, useEffect } from 'react';

// 自定义钩子：监听媒体查询
const useMediaQuery = (query) => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    // 初始化状态
    setMatches(media.matches);

    // 监听媒体查询变化
    const listener = () => setMatches(media.matches);
    media.addListener(listener);
    // 清理函数
    return () => media.removeListener(listener);
  }, [query]);

  return matches;
};

const MySvgImage = () => {
  const isDesktop = useMediaQuery('(min-width: 768px)');

  return (
    <div>
      {isDesktop ? (
        <svg viewBox="0 0 800 500">
          {/* 桌面端SVG代码 */}
        </svg>
      ) : (
        <svg viewBox="0 0 200 500">
          {/* 移动端SVG代码 */}
        </svg>
      )}
    </div>
  );
};

export default MySvgImage;

方法B：使用UI库的现成钩子 #

如果你用Material-UI、Chakra UI这类UI库，它们已经封装好了useMediaQuery钩子，直接用就行，比如Material-UI的写法：

import { useMediaQuery, Theme } from '@mui/material';

const MySvgImage = () => {
  // 用UI库自带的断点，比如md对应768px
  const isDesktop = useMediaQuery((theme: Theme) => theme.breakpoints.up('md'));

  return (
    <div>
      {isDesktop ? (
        <svg viewBox="0 0 800 500">
          {/* 桌面端SVG代码 */}
        </svg>
      ) : (
        <svg viewBox="0 0 200 500">
          {/* 移动端SVG代码 */}
        </svg>
      )}
    </div>
  );
};

方案3：CSS背景图（适合非内联需求） #

如果你的SVG不需要内联操作（比如修改内部元素颜色、添加动画），可以把SVG文件作为背景图，用媒体查询切换：

先把两个SVG文件放到项目的静态资源目录（比如assets/mobile.svg和assets/desktop.svg），然后在组件里用一个div承载背景：

import './MySvgImage.css';

const MySvgImage = () => {
  return <div className="svg-background"></div>;
};

export default MySvgImage;

对应的CSS：

.svg-background {
  width: 100%;
  height: 500px; /* 根据你的SVG实际高度调整 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 移动端背景图 */
@media (max-width: 767px) {
  .svg-background {
    background-image: url('./assets/mobile.svg');
  }
}

/* 桌面端背景图 */
@media (min-width: 768px) {
  .svg-background {
    background-image: url('./assets/desktop.svg');
  }
}

这个方法代码更简洁，但失去了内联SVG的灵活性，适合不需要操作SVG内部元素的场景。

内容的提问来源于stack exchange，提问作者user1941537