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

Posted 2023-03-06

【中文标题】为啥当宽度为 736px 时 svg LogoMonniMobile 不可见？

【英文标题】：Why is svg LogoMonniMobile not visible when the width is 736px?为什么当宽度为 736px 时 svg LogoMonniMobile 不可见？

【发布时间】：2021-11-24 03:58:18

【问题描述】：

这是我的代码：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 />没有出现在屏幕上。这是什么原因，如何解决？

【参考方案1】：

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

【参考方案2】：

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

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


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

【讨论】：

第一，我可以，第二，反正用你的版本不可见