這是我的代碼：codeandbox.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 />沒有出現在螢屏上。這是什么原因，如何解決？
uj5u.com熱心網友回復：
據我了解 id 問題 LogoMonni_0 LogoMonni_1 LogoMonni_2 ...如果 id sv1 與 scg2 相同我不知道出于某種原因瀏覽器認為它們應該消失
uj5u.com熱心網友回復：
你不能使用像<.
@media screen and (min-width: 737px) {
#LogoMonni-mobile {
display: none;
}
}
@media screen and (max-width: 736px) {
#LogoMonni-pc {
display: none;
}
#LogoMonni-mobile {
display: block;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312384.html
上一篇：將svg更改為不同的顏色
下一篇：將png格式的陰影轉換為svg