React MUI中如何根据屏幕宽度自动适配背景图片（移动端/桌面端）

问题根源 #

你的代码里给背景图和伪元素用了固定像素值：

• 背景图backgroundSize: "250px"、backgroundPositionX: "150px"是固定尺寸和位置，移动端Card宽度远小于桌面端，固定值会导致图片超出容器、位置偏移或者显示不全。
• 伪元素&::after的width: '50px', height: '100px'也是固定值，移动端容器变小后，这个伪元素的占比会失衡。

修复方案 #

利用MUI的响应式断点，针对不同屏幕尺寸（移动端xs、桌面端md+）设置不同的样式参数，让背景图和伪元素自适应容器宽度：

修改后的Card组件sx配置如下：

<Card sx={{
  bgcolor: "#C6EFEF",
  borderRadius: "10px",
  backgroundImage: `url(${Maerocket})`,
  backgroundRepeat: "no-repeat",
  position: "relative",
  // 桌面端样式
  backgroundSize: "250px",
  backgroundPosition: "right center",
  backgroundPositionX: "150px",
  // 移动端断点适配
  [theme.breakpoints.down('md')]: {
    backgroundSize: "60%", // 用百分比适配容器宽度
    backgroundPositionX: "calc(100% - 20px)", // 相对容器右侧定位
  },
  '&::after': {
    position: "absolute",
    content: '""',
    backgroundImage: `url(${Maedotted_vertical})`,
    backgroundSize: "17px 30px",
    backgroundRepeat: "no-repeat",
    backgroundPosition: "bottom left",
    display: "block",
    bottom: 25,
    left: 10,
    width: '50px',
    height: '100px',
    // 伪元素移动端适配
    [theme.breakpoints.down('md')]: {
      width: '30px',
      height: '60px',
      bottom: 15,
      left: 8,
    }
  },
}}>

另外，Typography的字号也可以做响应式调整，避免移动端文字溢出：

<Typography sx={{ 
  color: "#012B4E", 
  fontSize: { xs: "20px", md: "25px" }, // 移动端缩小字号
  pt: "27px", 
  pb: "28px", 
  fontWeight: "bold" 
}}>Algo Trading</Typography>

核心思路 #

• 避免给自适应容器内的背景元素用固定像素值，优先用百分比、calc()或者相对单位。
• 利用MUI的breakpoints.down/up语法，精准控制不同屏幕尺寸下的样式。
• 背景图适配时，backgroundSize: "contain"或者百分比是常用的自适应方案，根据需求选择：
  • contain：保持图片比例，完整显示在容器内
  • 百分比：按容器宽度的比例缩放图片

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