我正在为我的 ReactJS 应用程序使用 ParticlesJS 包。它显示在开头。我想在屏幕尺寸小于 600px 时隐藏它。它将显示设置为无,但是当屏幕大小重新调整到 600 像素以上时,粒子元素不会将显示设置回 block ,因此它不会再次显示。
html/jsx:
<div className="particles-container">
<Particles params={particleParams} className="particles" />
<div className="home-banner-content">
<img src="./src/style/img/logo_banner.png" />
</div>
</div>
CSS:
@media only screen and (max-width: 600px) {
.particles-container .particles {
display: none;
}
}
@media only screen and (min-width: 600px) {
.particles-container .particles {
display: block;
}
}
最佳答案
深入研究后,我发现当通过媒体查询设置 display: none;
时,Canvas 的高度设置为 0。
我将不得不深入挖掘以获得关于为什么会发生这种情况的正确答案。将返回对此答案的更新并对此进行适当的解释。
继续,当您的媒体查询设置 display: block;
时, Canvas 的高度仍然为 0,因此您无法看到它。
要解决此问题,您可以在 javascript 代码中监听窗口调整大小事件(如果您正在调整大小)。
但如果您要针对移动设备修复此问题,那么您可以在 javascript 本身内部检查窗口宽度,并有条件地渲染粒子组件。
此外,如果您为 Particles 组件提供“固定”高度作为 Prop ,您的媒体查询将起作用。
在这里,您可以看到一个演示:https://codesandbox.io/s/rw8666x11o
关于javascript - React 中的 ParticlesJS 组件隐藏了媒体查询但不会返回显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52307344/