为什么当宽度为 736px 时 svg LogoMonniMobile 不可见？

Question

这是我的代码：codesandbox.io

CSS

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

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

JSX

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 />
      <LogoMonniMobile />
    </div>
  );
}

屏幕尺寸> 736px时显示电脑版SVG，<= 736px时显示手机版，但不知为何<LogoMonniMobile />没有出现屏幕。这是什么原因，如何解决？

Answer 1

您不能使用像 < 这样的逻辑运算符。

@media screen and (min-width: 737px) {
  #LogoMonni-mobile {
    display: none;
  }
}

@media screen and (max-width: 736px) {
  #LogoMonni-pc {
    display: none;
  }
  #LogoMonni-mobile {
    display: block;
  }
}

Answer 2

据我了解 id 问题 LogoMonni_0 LogoMonni_1 LogoMonni_2 ... 如果 id sv1 与 scg2 相同我不知道浏览器认为它们应该出于某种原因消失

为什么当宽度为 736px 时 svg LogoMonniMobile 不可见？

Why is svg LogoMonniMobile not visible when the width is 736px?

css

svg

reactjs