Este es mi código: 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> ); } Cuando el tamaño de la pantalla es > 736px muestro la versión de computadora del SVG, y cuando <= 736px muestro la versión móvil, pero por alguna razón <LogoMonniMobile /> no aparece en la pantalla. ¿Cuál es la razón y cómo se puede solucionar?
No puede usar operadores lógicos como < .
@media screen and (min-width: 737px) { #LogoMonni-mobile { display: none; } } @media screen and (max-width: 736px) { #LogoMonni-pc { display: none; } #LogoMonni-mobile { display: block; } }Según entiendo, el problema de identificación LogoMonni_0 LogoMonni_1 LogoMonni_2 ... si la identificación sv1 es la misma que scg2, no sé por alguna razón, el navegador cree que deberían desaparecer