React响应式图片布局：useEffect与CSS媒体查询哪个更合适？

你要实现宽屏/小屏切换图片位置的需求，完全不需要用useEffect监听窗口resize，纯CSS媒体查询就能搞定，代码更简洁、性能更优，还能省去JS层面的状态管理逻辑。

优化方案：移除useEffect，用CSS控制图片显示与位置 #

步骤1：简化React组件代码 #

只保留一张图片，不需要根据屏幕状态渲染两张重复图片，通过CSS控制它的位置即可：

import "../styles/SponsorUs.css";
import svg from "../assets/parcours.svg";
import React from "react";

export function SponsorUs() {
    return (
        <div className='global'>
            <div className='titleSponsor'>
                <img className='titleSponsorImg' src={svg} alt="Parcours du 4L Trophy"/>

                <h1>Le 4l Trophy, c’est quoi?</h1>
                <p className='titleSponsorp1'>Le 4L Trophy est un raid étudiant organisé depuis plus de 20 ans au Maroc.
                    Il s'agit d'un défi sportif et humanitaire qui réunit chaque année des milliers d'étudiants
                    venus de toute la France et d'ailleurs. Le but ? Parcourir plus de 6000 kilomètres à bord de 4L,
                    tout en acheminant des fournitures scolaires pour les enfants défavorisés du Maroc.</p>
                <h1>Notre itinéraire </h1>
                <p className='titleSponsorp2'>Notre itinéraire pour le 4L Trophy est un véritable parcours du combattant
                    !
                    Nous affronterons les routes les plus difficiles du Maroc, à travers les montagnes,
                    les déserts et les plaines arides. Nous serons confrontés à des défis physiques et mentaux,
                    mais nous sommes prêts à relever le défi !</p>
                <h1>Trailer du 4L Trophy</h1>

                <h1>Vous êtes captivés par notre projet ? </h1>

            </div>
        </div>
    );
}

步骤2：修改CSS，用媒体查询控制图片样式 #

基于你之前设定的1000px阈值，通过@media规则调整图片的浮动、内边距等属性：

@import url("https://fonts.googleapis.com/css?family=Poppins");

.titleSponsor{
    font-family: 'Poppins', sans-serif;
    color: white;
}

.titleSponsor h1{
    font-size: 30px;
    font-weight: 600;
    padding-top: 5%;
    padding-left: 5%;
    text-align: left;
}

.titleSponsor p{
    padding-left: 5%;
    text-align: justify;
    font-size : 15px;
}

.titleSponsorp1{
    width : 70%;
}
.titleSponsorp2{
    width : 58%;
}

/* 默认宽屏样式（屏幕宽度>1000px） */
.titleSponsorImg{
    width : 25%;
    height : 25%;
    padding-top: 5%;
    padding-right: 5%;
    float: right;
}

/* 小屏样式（屏幕宽度≤1000px） */
@media (max-width: 1000px) {
    .titleSponsorImg{
        float: none; /* 取消浮动，让图片占据整行 */
        padding-right: 15%;
        /* 若需要图片居中，可添加：margin: 0 auto; display: block; */
    }
    /* 可选：小屏时调整文本宽度，提升移动端阅读体验 */
    .titleSponsorp1, .titleSponsorp2 {
        width: 90%;
    }
}

为什么不需要useEffect？ #

• 性能更优：CSS媒体查询是浏览器原生支持的响应式方案，无需JS监听resize事件，减少了不必要的重渲染和事件监听开销。
• 代码更简洁：移除了状态管理和事件监听逻辑，组件结构更清晰，后期维护成本更低。
• 符合响应式设计原则：布局类的响应式逻辑本该由CSS负责，JS更适合处理交互性强的动态逻辑，而非简单的样式切换。

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