为何屏幕宽度≤736px时SVG组件LogoMonniMobile无法显示

问题产生原因 #

• 媒体查询语法错误：第二条媒体查询使用了@media (max-width <= 736px)的错误写法，max-width是标准媒体查询属性，正确语法是直接跟冒号加阈值，混用<=符号导致该段样式完全不生效。
• CSS选择器无匹配元素：你导入的SVG组件没有手动设置id属性，所以你写的#LogoMonni-pc、#LogoMonni-mobile选择器找不到对应DOM元素，样式无法生效。

修复方案 #

第一步：修正CSS媒体查询语法 #

推荐使用兼容性更好的标准写法：

/* 屏幕宽度大于736px时隐藏移动端Logo */
@media (min-width: 737px) {
  #LogoMonni-mobile {
    display: none;
  }
}

/* 屏幕宽度小于等于736px时隐藏PC端Logo */
@media (max-width: 736px) {
  #LogoMonni-pc {
    display: none;
  }
  #LogoMonni-mobile {
    display: block;
  }
}

如果要使用范围写法，需要去掉max-width前缀，正确写法如下：

@media (width > 736px) {
  #LogoMonni-mobile {
    display: none;
  }
}

@media (width <= 736px) {
  #LogoMonni-pc {
    display: none;
  }
  #LogoMonni-mobile {
    display: block;
  }
}

第二步：给JSX中的SVG组件添加对应id属性 #

import { ReactComponent as LogoMonniPC } from "./logoMonniPC.svg";
import { ReactComponent as LogoMonniMobile } from "./LogoMonniMobile.svg";

import "./styles.css";

export default function App() {
  return (
    <div className={"LogoMonni"}>
      <LogoMonniPC id="LogoMonni-pc" />
      <LogoMonniMobile id="LogoMonni-mobile" />
    </div>
  );
}

如果SVG组件不支持直接透传id属性，可以在外层包裹div标签再给div设置对应id即可。

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